css 让子div垂直居中显示

CSS让子DIV垂直居中显示是网页设计中常用的技巧之一。下面详细介绍一下如何实现。

首先，让子DIV垂直居中显示需要满足两个条件：

1. 父元素必须有固定的高度
2. 子元素必须使用绝对定位

接下来就需要给父元素设置一个固定的高度，比如说500px。这时候我们的代码应该长这样子：

<div class="parent">
  <div class="child"></div>
</div>

这样子子元素就已经使用了绝对定位。但是，子元素现在还没有垂直居中。下面就是一个常用的技巧：使用transform属性实现垂直居中。

具体实现思路是：使用transform属性把子元素的顶部向上移动一半的高度，同时使用负的margin-top把子元素的顶部拉回来。这样子就可以达到垂直居中的效果了。下面是代码的修改：

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -30px; /* 子元素高度为60px，所以要减去30px */
}

这样子子元素就可以垂直居中了。完整的代码如下：

<div class="parent">
  <div class="child"></div>
</div>

通过上面的CSS代码，我们就可以实现子DIV的垂直居中显示。这种技巧在网页设计中非常常见，希望读者可以掌握。