居中的那些事

在前端开发过程中，我们不可避免的会遇到一些水平居中和垂直居中的问题，现就居中问题做以下总结。

---

a：水平居中

1，宽度固定的DIV

      我们只需要加上一句css代码即可，margin: 0 auto。

2，宽度不定的DIV

     父元素添加 text-align: center；子元素添加 display:inline-block；

     即可实现宽度不定的子元素的水平居中

3，绝对定位元素居中，我们只需按照下面写法即可。

---

b：垂直居中

1，对于有多个高度不一子元素的父元素（高度不知）来说，如何让子元素都垂直居中呢？

     子元素添加display: inline-block； vertical-align: middle；即可实现子元素在父元素的垂直居中。

2，对于单行文本来说，令line-height和height值一样即可。

3，还可以在父元素添加 display:table-cell；vertical-align:middle；实现子元素的垂直居中。

4，绝对定位元素垂直居中，我们我们只需按照下面写法即可。