图片垂直水平居中

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

 

• 行内元素居中, 包括文本，图片，表单元素等，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>

效果图片：