元素水平居中

实现元素水平居中几种常见的方式：

1. 若是行内元素, 给其父元素设置 text-align:center

---

2. 若是块级元素, 给该元素设置 margin:0 auto

---

3. 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}

元素的定位是absolute，适用于绝对定位又要居中的场景。（直接margin:0 auto，对于block元素有效）

4. 使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

.son{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
}

5. 使用CSS3中新增的transform属性, 子元素设置如下:

.son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

---

6. 使用flex 2012年版本布局, 可以轻松的实现水平居中, 父元素设置如下:

.parent {
    display: flex;
    justify-content: center;
}

 

参考：16种方法实现水平居中垂直居中