实现在固定尺寸容器内，图片水平垂直居中。
方法 ①
将容器样式的 text-align 设置为 center，行高 line-height 设置为与容器高度相同。代码如下：
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
line-height: 280px;
}
方法 ②
将容器样式的 display 属性设置为 table-cell，并将 text-align 设置为 center，vertical-align 设置为 middle。代码如下：
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
display: table-cell;
text-align: center;
vertical-align: middle;
}
注意：该方法不兼容 IE6 / IE7。
方法 ③
给容器样式的 text-align 属性设置为 center，并添加辅助子元素span，同时设置图片样式的 vertical-align 属性为 middle，该子元素样式的 display 属性设置为 inline-block，height 设置为 100%，vertical-align 设置为 middle。代码如下：
<div class="box">
<img src="avatar.jpg">
<span></span>
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
}
.box img {
vertical-align: middle;
}
.box span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
经测试，在所有浏览器都能实现图片水平垂直居中。
改进：给容器样式的 text-align 属性设置为 center，并设置 :before 伪元素的 content 属性为空，display 设置为 inline-block，height 设置为 100%，vertical-align 设置为 middle，同时设置图片样式的 vertical-align 属性为 middle。代码如下：
<div class="box">
<img src="avatar.jpg">
</div>
.box {
width: 280px;
height: 280px;
border: 1px solid #bbb;
text-align: center;
}
.box:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img {
vertical-align: middle;
}
TIPS: 使用 :before 伪元素设置样式，可以避免添加多余HTML代码，如 span 子元素。
注意：改进后的方法不兼容 IE6 / IE7。
|
