首先我们来看这样一段HTML：
| 代码如下 | 复制代码 |
|
<ul> <li> <a href=""><img src="" alt="" /></a> </li> </ul> |
|
类似这样的结构，是我们在实际应用中常遇到的，其中，li的宽和高都是固定的，但图片的宽和高可能是不确定的，例如商城的商品列表。
此时，如果希望图片水平居中，只需要给li应用text-align: center;即可，但如果需要图片垂直居中就不那么容易了。
网上有许多方法可以实现不固定高度元素垂直居中，例如：背景法、添加标签法，但这类破坏HTML结构的方法都是我不想要的，最后采用了淘宝的方法。
| 代码如下 | 复制代码 |
|
li a { width: 160px; height: 160px; padding: 2px; background-color: #fafafa; border: 1px solid #ececec; margin: 0 auto; display: table-cell; *display: inline-block; *font-size: 140px; *font-family: Arial; vertical-align: middle; } li img { vertical-align: middle; } 关键代码为： li a { |
|
我不是很情愿使用hack，但实在没办法，使用hack总比在HTML中添加额外元素要好得多，所以个人觉得这是目前我所知的最好的解决方法。
这里需要注意font-size的值，是根据li的高度除以1.14得来的，具体为什么淘宝工程师也不知道。
另外，如果图片的高度的是固定的，那么可以使用绝对定位加负外边距实现。
补充:
| 代码如下 | 复制代码 |
|
CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { font-family:"宋体"; border:1px green solid;/*针对IE的hack*/ *position:relative; *top:-50%; margin:0 auto; width:200px; } HTML |
|
有上面1和2我们看到对多数浏览器text-align:center;只对img（默认inline-block）生效，而margin:auto只对div（默认block）生效，那这次我们试着将img设置为block，将div设置为inline-block再进行测试看看。
代码如下
| 代码如下 | 复制代码 |
| <!DOCTYPE> <html > <head> <title>居中测试</title> <style type="text/css"> .container{ width:200px; height:120px; border:1px solid Green;} .box{ width:120px; height:90px; border:1px solid Green; display:inline-block;} .h-align-div{ text-align:center;} .h-align-img{ margin:auto auto; display:block;} </style> </head> <body> <div class="container h-align-div"> <div class="box"></div> </div> <div class="container"> <img class="h-align-img" width="120px" height="90px" src="#" alt="" /> </div> </body> </html> |
|
兼容性如下：
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
由上面的结果可以看出，text-align:center;和margin:auto主要是看元素的display属性。