# 经典居中问题

# 水平居中

• 行内元素text-align:center
• 块级元素

已知宽度

1. margin: 0 auto
2. 父元素position: relative 子元素绝对定位和margin-left: -width/2
   

未知宽度

1. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中 (不推荐)
2. 绝对定位+transform，translateX可以移动本身元素的50% (不推荐)
3. flex布局使用justify-content:center(推荐)

# 垂直居中

• 纯文字类 line-height
• 通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中
• 弹性布局flex:父级设置display: flex; 子级设置margin为auto实现自适应居中(推荐)
• table布局，父级通过转换成表格形式，然后子级设置vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）