CSS: 图片、文字水平垂直居中 | center image and text

css-center-imgtxt.css

/* IE6+ 图片水平垂直居中 */
/* 优点：兼容性较好，算是比较完美的一个方法了。缺点：需要计算 font-size 会有略微误差。*/
.ie6-img {
  display: block;
  width: 200px;
  height: 200px;
  line-height: 146px;
  overflow: hidden;
  text-align: center;
  *font-size: 175px; /* 0.875 */
}
.ie6-img:after {
  content: '';
  vertical-align: middle;
}
.ie6-img img {
  vertical-align: middle;
}

/* IE6+ 支持图片和多行文字水平垂直居中 */
/* 优点：兼容性和扩展性能得到较好的支持。缺点：层级过多。 */
.ie6-imgtxt {
  display: table;
  width: 200px;
  height: 200px;
  text-align: center;
  *position: relative;
}
.ie6-imgtxt .cell {
  display: table-cell;
  vertical-align: middle;
  *position: absolute;
  *top: 50%;
  *left: 50%;
}
.ie6-imgtxt .cell .cnt {
  *position: relative;
  *top: -50%;
  *left: -50%;
}

/* IE6+ 图片水平垂直居中 */
/* 优点：普普通通。缺点：需要计算 font-size 会有略微误差。 */
.ie6-img {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 200px;
  height: 200px;
  *display: block;
  *font-size: 175px; /* 0.875 */
}
.ie6-img img {
	vertical-align: middle;
}

/* IE7+ 图片水平垂直居中 */
/* 优点：代码简洁实用。缺点：不支持IE6。 */
.ie7-img {
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  *line-height: 200px; /* IE7 HACK */
}