多行文字（图片）垂直居中

最近比较忙，没有时间更新博文。也就在这段时间遇到了些问题，其实这些问题以前遇到过，也处理了，但最近遇到这个问题突然间不知道怎么处理了。半年多没遇到过多行文字垂直居中的问题，可能是因为所处行业问题。好了废话不多说。

大家应该多遇到过这个问题，可能大家都知道怎么解决，但有多少人真的弄清楚它的原理呢？

说先我们先写出html，如下：

<div class="cont">

<div class="hack">

<div class="article">下个周末也去拓展，想到心里就发麻了。</div>

</div>

</div>

大家可能会想为什么我要用3个div来呢，当然这样做是有用处的，如果忽略掉ie6，ie7的，两个div够了。

接下来看看他的样式

.cont{

width:400px;height:400px;background:#f60;display:table;*position:relative;

}

.hack{

vertical-align:middle;display:table-cell;*position:absolute;*top:50%;*left:0;

}

.article{

word-break:break-all;*position:relative;*top:-50%;

}

把代码复制下来试试，完全ok，在ie6，ie7下都没问题。

大家都应该知道display:table;这个属性吧，当然这个是按照表格的思想做的，但这个属性对ie7和ie6支持不理想，接下来的display:table-cell；这个属性也是一样，他的意思跟表格中的td差不多。刚才说道如果忽略掉ie6，ie7那么只要这两个div就可以完成任务了。但万恶的ie老是跟我们作对，之前我也只想到这个，后来翻了以前的代码才找到解决的办法。*position:absolute;*top:50%;*left:0;让hack这个div往下移动cont的50%的高度，article中的*top:-50%;让 article向上移动文字高度的一半，这样就让i7以下到达了垂直居中了，原理就这么简单，但有些时候就是想不起来。不过以前没怎么弄透他的原理，基本上只是简单的记住了这些代码，时间一长就基本忘记了，所以要想掌握它，还是要清楚他的原理。