如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過(guò)給父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)
滿足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的
不定寬的塊狀元素居中有三種方法來(lái)實(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>
方法二：
第一步：改變塊級(jí)元素的display為inline類(lèi)型，然后使用text-align:center來(lái)居中
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)勢(shì)是不用增加無(wú)語(yǔ)義標(biāo)簽，簡(jiǎn)化了標(biāo)簽的嵌套深度，但也存在著一些問(wèn)題：它將塊狀元素的 display 類(lèi)型改為 inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)定長(zhǎng)度值。
方法三：給父元素設(shè)置float，然后給父元素postion:relative和left:50%,自元素設(shè)置position:relative和left:-50%來(lái)實(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)不添加無(wú)語(yǔ)議表標(biāo)簽，不增加嵌套深度，但它的缺點(diǎn)是設(shè)置了 position:relative，帶來(lái)了一定的副作用。
