水平居中

行内元素

• 对爸爸使用text-align: center

块级元素

单个元素

• 对儿子使用margin: 0 auto

多个元素在一行

• 对爸爸使用display: inline-block +text-align: center，或者
• 对爸爸使用display: flex+justify-content: center

垂直居中

行内元素

• 对儿子上下设置一样的padding，或者
• （如果只有一行）把儿子的height和line-height设为相等的，或者
• 使用vertical-align: middle

块级元素

知道儿子的高度

• 对儿子使用绝对定位并设置top: 50%+```margin-top: -Xpx``，其中X是儿子高度的一半

不知道儿子的高度

• 对儿子使用绝对定位并设置top: 50%+transform: translateY(-50%)

如果浏览器支持flexbox

• 对爸爸使用display: flex+justify-content: center+flex-direction: column

垂直+水平居中

固定长宽

• 对儿子使用绝对定位，设置top和left为50%，margin第一项和最后一项为负。

不固定长宽

• 对儿子使用绝对定位，设置top和left为50%+transform: translate(-50%, -50%)

如果浏览器支持flexbox

• 对爸爸使用display: flex+justify-content: center+align-items: center

总结

• 最基本的3种居中：水平的text-align和margin，垂直的vertical-align
• flexbox能够解决大部分问题
• 不想用flexbox可以用兼容性较好的绝对定位+transform的方法