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中测试）