CSS：跨世纪的垂直居中问题解决方案

多年来，垂直居中问题一度成为前端开发者的热门话题。因为这个需求极其常见，但又看似简单，实施起来很难，尤其是涉及到尺寸不固定的情况时。

html基本结构

<main>
    <h1>我是居中的吗？</h1>
    <p>请让我保持居中显示</p>
</main> 

css基本结构

body{
    background: #DBDCFF;
    text-align: center;
}

1、基于绝对定位的方案

我们先来看两个早期的实现方法，它要求元素必须有固定的宽高度：

第一种需要计算margin-top和margin-left的值

main{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    margin-left: -9em;
    width: 18em;
    height: 6em;
    background: #C88F6E;
}

第二种就相对简洁了许多

main{
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 18em;
    height: 6em;
    margin: auto;
    background: #C88F6E;
}

效果如图：

固定宽高，绝对定位实现居中

上面的方法最大的局限就是前面说的，它要求元素必须宽高度是固定的，在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容决定的。那么，如果可以找到一个属性的百分比值以元素自身的宽高作为解析基准，那么我们的难题也就迎刃而解了！

我们或许可以从CSS变形属性中了解一下，当我们在translate()变形函数中使用百分比值时，是以该元素的自身宽度和高度为基准进行换算和移动的。有了这个属性，我们就可以这样解决了：

main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #C88F6E;
}

效果如图：

宽高度不固定，绝对定位实现居中

这种方法很好的满足了我们的需求，但是也有一些需要注意的地方：

• 实际项目中，有时不能选用绝对定位，因为它对整个布局影响过大

• 如果我们需要被居中的元素高度已经超过了视口，那它的顶部将会被截掉

• 在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能放置在半个像素上。

2、基于视口单位的方案

CSS值与单位（第三版）定义了一套新的单位，称为视口相关的长度单位。

• vw是与视口宽度相关的。与常人理解不同的是，1vw实际上表示视口宽度的1%，而不是100%。

• 与vw类似，1vh表示视口高度的1%。

• 当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。

• 当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。

了解了以上规则，我们就可以利用它来尝试解决垂直居中的问题：

main{
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    background: #C88F6E;
}

效果如图：

高度不固定，利用视口实现居中

3、基于Flexbox的方案

很明显这是一个目前为止的最佳方案，而且现代浏览器已经对Flexbox有相当不错的支持度了。

具体代码如下：

body{
    background: #DBDCFF;
    text-align: center;
    display: flex;
    min-height: 100vh;
    margin: 0;
}

main{
    margin: auto;
    background: #C88F6E;
}

效果如图：

使用Flexbox实现居中

当我们使用Flexbox时，margin:auto不仅在水平方向上将元素居中，在垂直方向上也是如此。