css写元素在父级中垂直居中

CSS是网页设计中必不可少的技术之一，通过CSS我们可以实现网页元素的各种布局效果，比如把元素水平居中、垂直居中等等。今天，我们就来学习一下如何使用CSS实现元素在父级中垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

在上面的代码中，我们使用了position、top和transform属性，来实现让元素在父级中垂直居中的效果。

首先，我们需要给父级元素添加position: relative属性，然后给子级元素添加position: absolute属性。接下来，我们给子级元素添加top: 50%属性，表示让该元素的顶部与父级元素的中心点对齐。但是此时子级元素的中心点并不在父级元素的中心点上，而是偏移了一半的子级元素高度。

为了解决这个问题，我们需要使用transform属性，并给子级元素添加transform: translateY(-50%);。该属性会将子级元素沿着Y轴向上平移50%，使其中心点刚好与父级元素的中心点对齐，从而实现了在父级元素中垂直居中。

除了以上方法，我们还可以使用FlexBox布局或者grid布局来实现元素在父级中居中的效果。这里不再赘述，有兴趣的读者可以自行查阅资料进行学习。