< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd> BTN
#wrapper {
border:1px solid #ccc;
width:400px;
height:200px;
text-align:center;
line-height:200px;　　// Vertical Align For IE7 & Firefox
_font-size:120px;　　// Vertical Align For IE6
}
#wrapper a {
display:-moz-inline-block;　　// For Firefox 2(-)
display:inline-block;　　// For Firefox 3 & IE6, 對于IE6來說其實相當于zoom:1, 僅僅是給elem一個layout。
　　　/ 注意：支持display:inline-block的瀏覽器有：Firefox3,Safari,Opera
margin:0 auto;　　// For Firefox 2(-)
width:80px;
height:20px;
font:11px/20px arial;
background:red;
}

---

擴展（一）：水平居中的翻頁元素
first prev 1 2 3 ... 8 next last
<div class="pager">
<a href="" class="first">first</a>
<a href="" class="prev">prev</a>
<a href="">1</a>
<strong>2</strong>
<a href="">3</a>
<span>...</span>
<a href="">8</a>
<a href="" class="next">next</a>
<a href="" class="last">last</a>
</div>
.pager {
width:800px;
border:1px dotted #ccc;
text-align:center;
}
.pager * {
display:-moz-inline-box;　　// 此屬性會造成text-align、text-indent等無效的問題，不建議使用。
-moz-box-align:center;　　// 解決上個屬性造成的text不能垂直居中的問題
display:inline-block;

padding:0 12px;
height:28px;
line-height:28px;
border:1px solid #ccc;
}
.pager span {
border-color:white;
padding:0 3px;
}
.pager strong {
border-color:red;
}
.pager .last {
background:red;
}

這種方法有個局限：因為使用了-moz-inline-box屬性，所以不能設置text-align,text-indent。因此不能用background進行圖片替換。

---

擴展（二）：菜單的水平居中

• Tab One
• Tab Two: Longer
• Tab Three: Longest
• Tab Four

<div id="menu">
<del>　　// 非del莫屬？！
<ul>
<li><a href="">Tab One</a></li>
<li><a href="">Tab Two: Longer</a></li>
<li><a href="">Tab Three: Longest</a></li>
<li><a href="">Tab Four</a></li>
</ul>
</del>
</div>
#menu {
border:1px dotted #ccc;
text-align:center;
}
#menu del {
display:inline-block;
text-decoration:none;
}
#menu ul {
display:table;
margin:0 auto;
}
#menu li {
display:table-cell;
*float:left;
}
#menu li a {
display:block;
width:160px;
background:gray;
margin:0 3px;
}

此方法來源：http://www.cssplay.co.uk/menus/centered.html

---

擴展（三）：圖片的垂直居中。（內聯(lián)元素的垂直居中）
.box {

display: table-cell;
vertical-align:middle;

text-align:center;

*display:block;
*font-size: 180px;
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
vertical-align:middle;
width:100px; height:30px;
} #html/xhtml/xml專欄 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的块级元素（导航，图片，层）的水平和垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。