图片在div中水平垂直居中显示的实现方法

实现在固定尺寸容器内，图片水平垂直居中。

方法 ①

将容器样式的 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。