我们有这样一个结构的 HTML:

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

如果我们要实现 .children.parent 中垂直居中。

通常第一印象会想起给父元素设置相对定位,给子元素设置绝对定位。这样子元素就相对于父元素定位,再通过 topleft 各偏移 50% 父元素宽度,使用 margin-* 来修正子元素的位置。

.parent {
position: relative;
}
.chilren {
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$height/2;
margin-left: -$width/2;
}

通过这种方式可以使得子元素在父元素中垂直居中。但是这种实现的方式需要知道子元素的宽高,以方便使用 margin-* 来修正之前的位置。

当不知道子元素的宽高时,这种方法就无法实现正真的垂直居中。这个时候就可以使用 transform: translate(-50%, -50%); 来实现子元素自身的偏移。

.parent {
position: relative;
}
.chilren {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

那么不使用定位是否能够使元素垂直居中呢?

这时候我们来想想要使元素水平居中的时候,我们会怎么做?Ok,一般我们都会用 margin: 0 auto;那么我们就可以让 margin-top: 50%, 这样的效果就跟相对定位时的 top: 50% 的效果差不多。接着就可以使用之前使用过的 transform 属性来使得元素向上偏移自身高度的一半,也就是 transform: translateY(-50%);

这样就可以实现不使用定位来来使得元素垂直居中了。

.chilren {
margin: 50% auto 0;
transform: translateY(50%);
}

除了上面的这些方法之外,还可以使用 Flexbox 布局来实现。

只需要在父元素中使用 display: flex;,然后在子元素上使用 margin: auto; 就可以实现垂直居中了。

.parent {
display: flex;
}
.chilren {
margin: auto;
}

另外还有几种实现垂直居中的方法,并不常见与常用,使用就不提了。