CSS实战技巧：图片（大小不固定）的水平垂直居中

1.display:inline-block和文字大小控制居中

如果图片和文本处于一行时，可采用这种方法。

html代码

<div class="box">
<span>关注我们:</span>
<a href="#"><img src="qq.png"></a>
</div>

css代码

.box {
width: 500px;
height: 300px;
border: 5px solid #000;
/*设置图片的水平居中*/
text-align: center;
}
.box span {
line-height: 300px;
}
/*设置图片的垂直居中*/
.box a {
display: inline-block;
vertical-align: middle;
}
.box a img {
/*清除图片3px空白*/
vertical-align: middle;
}

注意a标签不能设置高度，但是可以设置宽度以及padding

效果图

2.背景定位的方法

html部分

<ul>
<li style="background-image: url(1.jpg)"></li>
<li style="background-image: url(2.jpg)"></li>
<li style="background-image: url(3.jpg)"></li>
</ul>

css部分

ul {
list-style: none;
}
li {
float: left;
width: 200px;
height: 200px;
border: 5px solid #000;
margin: 0 10px;
/*以下为主要代码*/
background-position: center;
background-repeat: no-repeat;
}

background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址

效果图（IE6中测试）

3.display:table-cell

IE6,IE7不认识display:table-cell，所以以下的效果图在IE8中测试

html代码

<ul class="box">
<li><a href="#"><img src="1.png"></a></li>
<li><a href="#"><img src="2.png"></a></li>
<li><a href="#"><img src="3.png"></a></li>
</ul>

css代码

ul {
list-style: none;
overflow: hidden;
}
.box li {
float: left;
border: 5px solid #000;
margin: 0 10px;
}
.box a {
/*主要代码，记得要设置宽度和高度*/
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
.box a img {
/*清除图片3px空白*/
vertical-align: middle;
}

效果图（IE8中测试）