前端最佳PC端垂直居中和最佳移动端垂直居中解决方案

不管是初学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. 表格布局法（兼容性还可以）