一、水平居中（text-align：center;）

這個屬性在沒有浮動的情況下，我們可以將塊級元素轉換為inline/inline-block，然后其父元素加上text-align:center;屬性就可以將其居中。如果是行內元素（比如span、img、a等）直接在父元素上添加text-align:center;屬性即可。

二、使用margin:0auto;水平居中

前提：給元素設定了寬度和具有display：block；的塊級元素。

讓一個DIV水平居中，只要設置了DIV的寬度，然后使用margin：0auto，css自動算出左右邊距，使得DIV居中。

三、定位實現居中(需計算偏移值)

原理:通過定位使元素左上角居中，再通過偏移值margin調整使元素中心居中。缺點：高度寬度需事先知道。

<divclass="absolute_p1">  

      <divclass="absolute_c1"></div> 

</div>

.absolute_p1{  

   position:relative; 

   width:200px;  

   height:200px;}

.absolute_p1.absolute_c1{  

    width:100px;  

    height:100px; 

    position:absolute;/*fixed同理*/  

    left:50%;top:50%;  

    margin-left:-50px;  

    margin-top:-50px;/*需根據寬高計算偏移量*/}

該方法普遍使用，但是前提必須知道元素的寬度和高度。如果當頁面的寬高是動態的，比方說頁面需要彈出一個DIV層必須要居中顯示，DIV的內容是動態的，所以寬高也是動態的，這是可以用jquery解決居中。