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");
}