CSS优雅地实现垂直水平居中

前言

在CSS中对元素进行水平居中是非常简单的。

块级元素水平居中：对其自身设置 margin:0 auto
这里上下的外边距随便设置，不一定是0，左右要自适应即可。

对其再设置浮动和绝对定位属性会覆盖水平居中

行内元素水平居中：对其父元素设置 text-align: center

然而对一个元素进行垂直居中，就令人头皮发麻，原因是：

它是极其常见的需求
理论上，实现十分简单
实践中，由于CSS回溯机制，往往充满陷阱，当涉及尺寸不固定的元素时尤其如此。

下面就来探索一下垂直居中的解决方案。

单行行内元素垂直居中：

设置 line-height 与 height 一样高。（推荐）
设置padding-top padding-bottom

多行行内元素垂直居中：

使用flex布局（推荐）
将元素转为table样式，再设置vertical-align：middle;

块级元素垂直水平居中的解决方案

结构代码如下所示：

<body>
    <div id="block">
        //这里面是一些内容，可能是文字、图片等
    </div>
</body>

1. 基于绝对定位的解决方案

1.1 利用绝对定位 + margin 反向偏移

早期的垂直居中方法，要求元素具有固定宽和高。

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

实现过程：

把该元素左上角放置在视口的正中心
利用负外边距把它向左、向上移动（移动距离相当于它自身宽高的一半）

1.2 利用绝对定位 + margin：auto（定宽高）

CSS代码：

#block {
    position: absolute;
    margin: auto;
    /*注意不要遗漏margin自适应*/
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: yellow;
    width: 18em;
    height: 6em;
}

实现原理：利用css定位规则，让css根据定位计算margin值，用 CSS hack 的方式实现水平垂直居中。

注意：居中块的尺寸需要可控，因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算的尺寸是与父容器一样的。无论是设置width、height 或者是 max-height、max-width，都是让尺寸不会扩大到与父级一样。

1.3 优化：借助强大的calc()函数（定宽高）

CSS代码：

#block {
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
    background: yellow;
}

局限性：

要求显式设置宽高
文字过多可不保证都在容器内部哦🐒

那么能不能找到一个属性的百分比值以元素自身的宽高作为解析基准。

1.4 优化：CSS变形属性（不定宽高）

translate()的基准

应用：主要是针对不定宽高的解决方案，定宽高的话可以用负的margin值来实现。

这正是我们所需要的，只要换用基于百分比的CSS变形来对元素进行偏移，就可以解除对固定尺寸的依赖。🐣

CSS代码：

#block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: yellow;
}

局限性：

有时不能选用绝对定位，因为它对整个布局的影响太过强烈
如果需要居中的元素已经在高度上超过了视口，那么顶部将会被裁减。
在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用transform-style:preserve-3d来修复，是一种hack手段。

2. 基于视口单位的解决方案

CSS3定义了一套新的单位，称为视口相关的长度单位。

vm是与视口宽度相关的。1vm表示视口宽度的1%，而不是100%。
与vm类似，1vh表示视口高度的1%
当视口宽度小于高度时，1vmin等于1vm
当视口宽度大于高度时，1vmax等于1vm

CSS代码中，适用于外边距的是vh单位：

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

margin:50vh auto 0; 属性对应：上、左右、下

局限性：只适用于在视口中居中的场景。

3. 基于Flexbox 的解决方案（最佳方案）

CSS代码：

body {
    display: flex;
    min-height: 100vh;
    margin: 0;
}

#block {
    margin: auto;
    background: yellow;
}

步骤：

先给这个待居中的元素的父元素设置 display:flex
再给元素自身设置 margin:auto

Flexbox还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中

CSS代码：

main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18em;
    height: 6em;
}

4. 利用table 实现垂直水平居中

给目标元素添加一个父元素，在父元素上设置以下属性。

CSS代码：

#block-parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#block {
    background: yellow;
}

优点：适用性很强，没有兼容性问题
缺点：会增加冗余的HTML结构。

总结

CSS3已经对垂直水平居中做了很大的改良，根据CSS3的计划，在未来，只需要下面一行代码即可实现：

align-self:center;

这听起来多么令人振奋！🔥🔥

CSS优雅地实现垂直水平居中