不管是初学CSS还是面试考题，如何垂直居中一直是个老生常谈的话题，可能你知道很多方法，但是到底哪一个最好往往还是模棱两可，因此将在这里一一探讨各种方法。
- 基于绝对定位的解决方法
- 兼容 IE6+
- 优点 兼容性极好
- 缺点 代码耦合，需要定宽高
代码如下：
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
}
这段代码通过绝对定位，将元素偏移到左上50%的地方，此时将是垂直居中的状态，继续设置其宽高，此时将以左上角垂直居中的点为扩展向右下扩张，所以需要通过margin将其左上方向再次偏移宽高的一半，从而达到垂直居中的效果。
- 基于绝对定位的解决方法(升级版)
- 兼容 IE9+
- 优点 代码简洁
- 缺点 代码耦合，需要定宽高
代码如下：
div{
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
通过使用calc属性，省去不必要的代码。
- 基于绝对定位的解决方法(最终版)
- 兼容 IE9+
- 优点 代码简洁,不用定宽高
- 缺点 无法兼容IE8
代码如下：
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 基于绝对定位的解决方法(PC兼容版最佳实践)
- 兼容 IE6+
- 优点 代码简洁,不用定宽高
- 缺点 需要绝对定位
代码如下：
div{
position: absolute;
left: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
通过使用绝对定位元素上下左右偏移设置为0，使其在水平和垂直方向都具有流动性，最后margin将从水平和垂直方向平分剩余空间。
- 基于视口单位的解决方法
- 兼容 IE9+
- 优点 代码简洁,不用定宽高，不用绝对定位
- 缺点 无法兼容IE8
在css3中，定义了一些新的单位vh,vw,vmin,vmax,1vh等于视口高度的1%,也就是100vh等于视口的100%，vmin，vmax分别是视口中较小值和较大值，于是我们有以下代码：
div{
width: 18em;
margin: 50vh auto 0;
transform: translate(-50%);
}
- 基于Flexbox的解决方案(移动端最佳解决方案)
- 兼容 IE9+
- 优点 代码简洁,不用定宽高，不用绝对定位
- 缺点 无法兼容IE8
Flexbox就是针对这个需求而被设计出来的，所以其便捷与简单性简直是开辟一个新天地，代码如下：
body{
display: flex;
}
div{
margin: auto;
}
看，就是这么简单，只需要一个容器设置flex布局，然后设置margin,它就会自动垂直居中，当然我们也可以不用容器，代码如下：
div{
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
margin: auto;
}
通过align-items设置垂直居中，使用justify-content水平居中，最后使用margin均分剩余空间达到垂直居中效果，实在是美滋滋。
其它居中方法，可自行百度，这里不推荐：
- 行内文本垂直居中（近似垂直居中）
- 表格布局法（兼容性还可以）
