前言

如何让一个子元素在父容器里水平垂直居中？你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。让你感受一下标准垂直居中的魅力。

如何让一个行内元素（文字、图片等）水平垂直居中

行内元素的居中问题比较简单。

行内元素水平居中

给父容器设置：text-align: center;

行内元素垂直居中

让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如： .father { height: 20px; line-height: 20px; }

如何让一个块级元素水平垂直居中

这一段是本文的核心。如何让一个块级的子元素在父容器里水平垂直居中？有好几种写法。我们一起来看看。

margin: auto 的问题

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父容器应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto或者 margin: 0 auto。在这里，margin: auto相当于margin: auto auto auto auto。margin: 0 auto相当于margin: 0 auto 0 auto，四个值分别对应上右下左。其计算值取决于剩余空间。但是，如果要对一个元素垂直居中，margin: auto就行不通了。那还有没有比较好的通用的做法呢？

方式1：绝对定位 + margin

需要指定子元素的宽高，不推荐

方式2：绝对定位 + translate

无需指定子元素的宽高，推荐。

方式3：绝对定位 + top,left,bottom,right = 0 + margin: auto

无需指定子元素的宽高，推荐。

方式4：flex 布局（待改进）

将父容器设置为 Flex 布局，再给父容器加个属性justify-content: center，这样的话，子元素就能水平居中了；再给父容器加个属性 align-items: center，这样的话，子元素就能垂直居中了。

方式5： flex 布局 + margin: auto（推荐）

我们只需写两行声明即可：先给父容器设置 display: flex，再给指定的子元素设置我们再熟悉不过的 margin: auto，即可让这个指定的子元素在剩余空间里，水平垂直居中。大功告成。

最后一段

有些实现方式虽然简单，但必须要经得起千锤百炼。我们要做到敬畏每一行代码，不能浮于表面。团队开发，要的不是个性，而是标准和规范。