图片垂直水平居中

前端布局，垂直水平居中是经常遇到的一个场景。水平居中较为容易，垂直居中则需变通处理，特别是图片的居中。

• 行内元素居中, 包括文本，图片，表单元素等，display属性为inline的元素

水平居中原理： text-align:center 实现水平居中

垂直居中原理：利用 line-height 等于 height

• 块元素居中，display属性为block的元素

水平居中原理：利用 margin:0 auto 实现

垂直居中原理：利用 vertical-align 实现垂直居中，决定行高的是行内最高的元素的值

下面贴出的代码为块元素居中代码，行内元素比较简单不做演示。

css：

.box {
    /*设置水平居中*/
    text-align:center;
    width:500px;
    height:500px;
    border: 1px solid #eee;
}
.box span{
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.box img {
    /*设置图片垂直居中*/
    vertical-align:middle;
    width:80%;
    height:80%;
} 

html布局：

<div class="box" >
    <span></span>
    <img src="images/10/7.png">
</div>

效果图片：