csss实现元素居中

        元素居中分为垂直居中、水平居中、水平和垂直都居中，这里主要介绍几种常见的使元素水平、垂直都居中的方法。

方法一：负margin

       1.将待居中元素box设置为绝对定位，left:50%，top:50%；

       2.利用负margin值调整到居中，margin-left取负的box宽度的一半，margin-top取负的box高度的一半；

       缺点：需要提前知道待居中元素的size。

       container：宽500px，高100px；box：宽200px，高80px。

 

      demo戳这里：负margin居中

 方法二：负margin+transform

      基本原理同方法一，只是使用了CSS3中的transform属性，它取值为translate（-50%,-50%），表示box在x轴、y轴方向上向原点分别平移box元素宽和高的一半。

       1.将待居中元素box设置为绝对定位，left:50%，top:50%；

       2.transform：translate（50%，50%）；

       优点：不必提前知道待居中元素的大小。

       demo戳这里：transform居中

 方法三：绝对定位居中

      1.将元素绝对定位，四个方向定位都取0

      2.margin取值为auto。

      demo戳这里：绝对定位居中

 方法四：viewport居中

      这个方法是针对整个viewport居中的

      1.将元素的position取fixed，四个方向定位都取0；

      2.margin取值为auto。

      demo戳这里：viewport居中