如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。

这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。

当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。

如何让一个行内元素水平垂直居中

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

行内元素水平居中

给父容器设置：

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就行不通了。

比如下面这段代码：