<BODY>
<h1>未知宽高的图片水平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<img src="data:images/01.jpg" />
</div>
</div>
<!--box-outer-->
<h1>多行文本平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
</div>
</div>
<!--box-outer-->
</BODY>
=============================
h1{
text-align: center;
margin:30px auto;
}
.box-outer{
width: 400px;
height: 400px;
margin: 30px auto;
}
.box {
width: 400px;
height: 400px;
border: 1px #000 dashed;
text-align: center;
vertical-align: middle;
display: table-cell;
*display: block;
*font-size: 175px;
/*约为高度的0.873，200*0.873 约为175*/
*font-family: Arial;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img {
vertical-align: middle;
}
可惜使用table-cell不兼容ie6.使用table-cell了，margin不起作用，可以外嵌套一层div