水平居中
行内元素
- 对爸爸使用
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的方法
