#元素居中法#

1.    水平居中：text-align：center；

2.    垂直居中：vertical-align：middle；

3.    display：table-cell   vertical-align：middle 使高度不同的元素都垂直居中，其中div的display：inline-block使几个div在同一行显示。

4.    绝对定位元素居中： 1）  

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    margin-top: -200px;    /* 高度的一半 */

    margin-left: -300px;    /* 宽度的一半 */

}

2）

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%);   /* 第一个50%为width的一半，第二个50%为height的一半 */

}

3）

.element {

    width: 600px; height: 400px;

    position: absolute; left: 0; top: 0; right: 0; bottom: 0;

    margin: auto;    /* 水平和垂直都居中 */

}

5. 块状元素水平居中：margin-left=auto；margin-right=auto；