块级元素水平居中

 

#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,Operamargin: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

---

扩展（三）：图片的垂直居中。（内联元素的垂直居中）

 

 

#wrapper_2 {border:1px solid #ccc;width:400px;height:200px;text-align:center;display:table-cell;　　// For Firefoxvertical-align:middle;　　// For Firefox*line-height:200px;　　// Vertical Align For IE7_font-size:175px;　　// Vertical Align For IE6, FontSize 大法}#wrapper_2 img {*vertical-align:middle;　　// For IE, 不设的话图片下面有个小空位border:1px solid #ccc;}