CSS控制垂直水平居中(固定容器高度)

其实也没什么，主要还是利用hack修复IE6以及更低版本的不支持。

这个例子需要固定容器的高度（已知外框高度），但中间内容可以任意高度。这里以图片来做内容。以下是方法一：

看代码：

<div class="div">
 <p><img src="zxz.jpg"></p>
</div>

.div { display:table-cell; vertical-align:middle; border:1px solid #000; width:100px; height:200px; _position:relative;}
.div p { _position:absolute; _top:50%; width:100%; text-align:center;}
.div p img { _position:relative; _top:-50%;}

能兼容FF,IE6,Opera,还是非常不错的，其实要实现此效果，方法有多种。下面再说一种更科学的方法：

方法二：

<div class="box">
 <img src="img src="zxz.jpg" />
</div>

.box { display: table-cell; ertical-align:middle; text-align:center; width:100px; *display: block; *font-size: 175px;/*约为高度的0.873，00*0.873 约为175*/ *font-family:Arial;/*为防非utf-8编码引起的hack失效*/ width:200px; height:200px; border: 1px solid #eee;}
.box img { /*设置图片垂直居中*/ vertical-align:middle;}

可以减少一个没意义的标签，是不是科学很多哦！