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”,則僅垂直居中；