内容导读

不管是初学CSS还是面试考题，如何垂直居中一直是个老生常谈的话题，可能你知道很多方法，但是到底哪一个最好往往还是模棱两可，因此将在这里一一探讨各种方法。这段代码通过绝对定位，将元素偏移到左上50%的地方，此时将是垂直居中的状态，继续设置其宽高，此时将以左上角垂直居中的点为扩展向右下扩张，所以需要通过 margin 将其左上方向再次偏移宽高的一半，从而达到垂直居中的效果。通过使用绝对定位元素上下左右偏移设置为0，使其在水平和垂直方向都具有流动性，最后 margin 将从水平和垂直方向平分剩余空间。通过 align-items 设置垂直居中，使用 justify-content 水平居中，最后使用 margin 均分剩余空间达到垂直居中效果，实在是美滋滋。

不管是初学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均分剩余空间达到垂直居中效果，实在是美滋滋。

其它居中方法，可自行百度，这里不推荐：

1. 行内文本垂直居中（近似垂直居中）

2. 表格布局法（兼容性还可以）