轉載的：http://www.voidcn.com/article/p-wmdxyijd-bpm.html
一、行內元素水平居中
方法：如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。
如下：
<body> <div class="center"><span>行內元素在父容器中水平居中顯示。</span></div> </body> <style> div{ border:1px solid ; margin:20px; } .center{ text-align:center; } </style>
二、塊狀元素水平居中
當被設置元素為塊狀元素時，text-align:center 就不起作用了，此時分兩種情況：定寬塊狀元素和不定寬塊狀元素。
1、定寬塊狀元素（塊狀元素的寬度width為固定值）
方法：滿足定寬和塊狀兩個條件的元素可以通過設置“左右margin”值為“auto”來實現居中
如下：
<body> <div>定寬塊狀元素水平居中。</div> </body> <style> div{ border:1px solid red; margin:20px auto; width:200px;/*寬度為固定值，不能寫百分比*/ } </style>
2、塊狀不定寬元素
方法：
①設置 margin:0 auto; display:table;
②設置display:inline方法。改變塊級元素的display為inline類型（設置為行內元素顯示），然后使用text-align:center來實現居中效果
③設置position:relative;left:50%，利用相對定位的方式，將元素向左偏移50%。通過給父元素設置float，然后給父元素設置position:relative和left:50%，子元素設置position:relative和left:-50%來實現水平居中
方法①如下：
<div class="wrap"> 不定寬塊狀元素水平居中 </div> .wrap{ background:#ccc; margin:0 auto; display:table; }
方法②如下：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> <style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} </style>
方法③如下：
<div class="wrap"> <div class="wrap-center">不定寬塊狀元素水平居中。</div> </div> .wrap-center{ background:#ccc; position:relative; left:-50%; } .wrap{ float:left; position:relative; left:50%; }