CSS实现图片垂直居中

.box{
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .out,
    .in{
        float: left;
        margin-right: 15px;
    }
    /* out */
    .out .t{
        box-shadow: 0 -3px 5px -2px #f00;
    }
    .out .r{
        box-shadow: 3px 0 5px -2px #0f0;
    }
    .out .b{
        box-shadow: 0 3px 5px -2px #00f;
    }
    .out .l{
        box-shadow: -3px 0 5px -2px #ff0;
    }
    /* in */
    .in .t{
        box-shadow: inset 0 3px 5px -2px #f00;
    }
    .in .r{
        box-shadow: inset -3px 0 5px -2px #0f0;
    }
    .in .b{
        box-shadow: inset 0 -3px 5px -2px #00f;
    }
    .in .l{
        box-shadow: inset 3px 0 5px -2px #ff0;
    }

1.使用一个空标签辅助实现图片垂直居中

css代码：

<style type="text/css">
*{ margin:0; padding:0;}
body{padding:10px 0 0 10px;}
.box{
width:200px;
height:200px;
border:1px solid #0CF;
text-align:center;
}
.box span{
height:100%;
vertical-align:middle;
display:inline-block;
}
.box img{
vertical-align:middle;
}
</style>

html代码：

<div class="box">
<span></span>
<img src="1.jpg" />
</div>

2.利用包围图片的盒子及图片的宽度，高度计算实现图片的垂直居中

CSS实现图片垂直居中