老板的手机收到一个红包，为什么红包没居中？如何让一个元素水平垂直居中？
本文的最新内容将在GitHub上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。
前言
老板的手机收到一个红包，为什么红包没居中？
如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。
你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。
这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。
当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。
如何让一个行内元素（文字、图片等）水平垂直居中
行内元素的居中问题比较简单。
行内元素水平居中
给父容器设置：
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就行不通了。
比如下面这段代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ height: 500px; background: pink; } .son { width: 300px; height: 200px; background: red; margin: auto; } </