块状元素居中/浮动元素居中/绝对定位元素居中/内容居中

1、块状元素水平居中：

margin-left=auto；margin-right=auto；

2、浮动块状元素水平居中：

外包装块“float：left；position：relative；left：50%”；

内部块“float：left；position：relative；right：50%”

3、内容居中：

内联元素：text-align:center；vertical-align:middle

块状元素：

display:table-cell;vertical-align:middle; 

若是单行内容：line-height=height

4、绝对定位元素垂直水平居中：

方法1：

.element {

   width: 600px; height: 400px;

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

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

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

}

但这种方法优点是兼容性较好，缺点是需要提前知道元素的尺寸，否则margin负值的调整无法精确。此时，往往要借助JS获得。

方法2：使用CSS3

CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，无需提前知道元素尺寸，其都是水平垂直居中显示的。但此方法兼容性不好。

.element {

   width: 600px; height: 400px;

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

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

}

方法3：上下左右均0位置定位+“margin: auto”（推荐做法！）

.element {

   width: 600px; height: 400px;

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

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

}

若只设置“margin-left:auto”+“margin-right:auto”,则仅水平居中；

若只设置“margin-top:auto”+“margin-bottom:auto”,则仅垂直居中；