高度自适应的水平垂直居中布局

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。

<div class="container">Hello World！</div>

.container {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%); // 自身宽度和高度的一半  border: 1px solid red; }

 

优点：无需定高度。高度随内容自适应。
缺点：元素脱离文档流。如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

方法二

我们知道，可以使用margin来实现水平居中对齐，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。