如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)磨总，水平居中是通過給父元素設(shè)置text-align:center來實(shí)現(xiàn)
滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的
不定寬的塊狀元素居中有三種方法來實(shí)現(xiàn)誓篱。
方法一：
第一步：為需要設(shè)置居中的元素外面加入table標(biāo)簽（包括tbody朋贬，tr，td）
第二步：為table設(shè)置“左右margin居中
html代碼
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代碼
<style>
table{margin:0 auto;}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
方法二：
第一步：改變塊級元素的display為inline類型窜骄，然后使用text-align:center來居中
html代碼
<body>
<div class="container">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
</body>
css代碼
<style>.container{text-align:center}
.container ul{list-display:none; margin:0; padding:0; display:inline;}
.container li{margin-right:8px; display:inline;}
</style>
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標(biāo)簽锦募，簡化了標(biāo)簽的嵌套深度，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline邻遏，變成了行內(nèi)元素糠亩，所以少了一些功能虐骑，比如設(shè)定長度值。
方法三：給父元素設(shè)置float赎线，然后給父元素postion:relative和left:50%,自元素設(shè)置position:relative和left:-50%來實(shí)現(xiàn)水平居中
html代碼
<body><div class="container"><ul><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li></ul></div></body>
css代碼
<style>
.container{float:left; position:relative; left:50%;}
.container ul{list-display:none;margin:0;padding:0;position:relative;left:-50%;}
</style>
這種方法可以保留塊狀元素仍以 display:block 的形式顯示廷没，優(yōu)點(diǎn)不添加無語議表標(biāo)簽，不增加嵌套深度垂寥，但它的缺點(diǎn)是設(shè)置了 position:relative颠黎，帶來了一定的副作用。
