css-div下内容垂直居中

1、多行行文字在固定高度的div中垂直居中，只兼容高级浏览器和移动端

.detail {
width: 395px;
height: 289px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: left;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: left;

display: -o-box;
-o-box-orient: vertical;
-o-box-pack: center;
-o-box-align: left;

display: -ms-box;
-ms-box-orient: vertical;
-ms-box-pack: center;
-ms-box-align: left;

display: box;
box-orient: vertical;
box-pack: center;
box-align: left;
}

<div class="pull-left detail">
   <h1 class="show-title">所见即<span>所得</span></h1>
   <p>我用完之后是这个样子，你们用完之后也会是这个样子！-成龙</p>
</div>

2、固定高度div中不固定长宽的img垂直水平居中，兼容ie6

 .pic-area .main-pic {
  display: table-cell;
  width: 700px;
  height: 465px;
  line-height: 465px;
  text-align: center;
  vertical-align: middle;

  /* 针对IE的Hack */
  _display: inline;
  *font-size: 405px;/*约为高度的0.873，465*0.873 约为405*/
  *font-family: Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}

.pic-area .main-pic img {
max-width: 700px;
max-height: 465px;
line-height: 465px;
text-align: center;
vertical-align: middle;
zoom:1;
_width: expression((this.width)>=700?"700":"auto");
_height: expression((this.height)>=465?"465":"auto");
}

 

转载于:https://www.cnblogs.com/manchun/p/5140309.html