类似table的固定容器高度的CSS垂直居中方法

垂直居中的方法很多，但是每次要面对解决具体的需求时，每次都纠结不爽，因为一方面要兼容IE，另一方面，用table布局总感觉被鄙视（自己太能YY了，其实我觉得才没人懒得看是怎么实现的）。又遇到需要图片居中的效果了，又犯愁了，在纠结该如何能比较简洁的实现图片居中，并且图片的高度是未知的。

每次做完页面，很少做技术总结；这么长时间下来，也没积累太多干货，想想也真是汗颜。临时在google，baidu上，看到各种技巧，到最后自己做的时候，总是缺点火候，不是偏低一些，就是那偏高一些，什么line-height什么的，原理不了解，拿来就用，怎么可能能达到想要的效果呢？看来自己的学习态度和方法还真要改一改了。

翻来翻去，终于在一个不太经常逛的网站上，看到一个大牛写的一个兼容IE和其他浏览器的方案，让我眼前一亮；总结一下呢就是：支持display:table 的就用display:table-cell布局；对于IE6-7，则充分利用IE的布局bug来解决。

1. 既然支持display:table了，那就好说，直接按照类似表格布局就可以了。最后实践了一下发现，元素的宽度没有了，就连设置了width:100% 也不好用了，只能写一个固定值才可以；想想这也没办法，外边没有table元素，宽度百分比如何计算呢？不过，幸好我这没有自适应宽度一说，可以安心的使用。

2. 奇葩的IE6-7，就充分利用他们的布局BUG就好了；兼容IE6-7和现代浏览器的垂直居中代码，简单粗暴，代码如下。
css代码：

.mock-td{ display: table-cell; vertical-align: middle; *position: relative; height: 80px; background: #eee; }
.mock-td-ie7{ *position:absolute; top: 50%; background: red; width:400px; }
.mock-td-div{ *position: relative; top:-50%; height: 40px; width:300px; background: #ccc; }

html代码

<div class="mock-td">
    <div class="mock-td-ie7">
        <div class="mock-td-div">除了IE6-7，其他都居中了</div>
    </div>
</div>

总体来说，实现思路是3个容器嵌套，1)最外层类似单元格 td 的作用；2)然后中间容器绝对定位，向下偏移一半的高度；3)最后一层容器，就是自己的内容了，相对定位position:relative;top:-50%;关键的一点就是这个-50%的top，其他浏览器都不向上偏移，只有IE6-7向上偏了一半的高度，好像那是中间绝对定位的元素高度固定了一样；而其他浏览器，只有中间容器固定高度，才会向上偏一半的高度，否则认为高度为0，即使不使用绝对定位，使用相对定位，高度即使被子元素撑起来，也不会向上偏移一半的高度，真是奇了怪了。

 

效果图下，IE6-7和Chrome浏览器

（这个是IE6-7下效果）

（这个是Chrome下效果）

扩展联想一下，原来做固定容器高度的元素居中时，一般是：position:absolute; top:50%; margin-top:-1*height/2; 于是就尝试一下这种方案是否可行。但由于是高度未知的元素，margin使用百分比时是按照宽度计算的，没办法，只能更改文档书写方式了。代码如下，IE6-8下依旧无效，Firefox下没有writing-mode样式，只能在webkit下娱乐一下了。

.mock-td2{ height: 80px; position:relative;  background: #eee; }
.mock-td2-margin-dir{ position:relative; top:50%; -webkit-writing-mode: vertical-lr; background: red; }
.mock-td2-margin-top{ margin:-50% 0 0 0; }
.mock-td2-div{ -webkit-writing-mode: horizontal-tb; height: 40px; width:400px; background: #ccc; }

html代码：

<div class="mock-td2">
    <div class="mock-td2-margin-dir">
        <div class="mock-td2-margin-top">
            <div class="mock-td2-div">负一半 margin-top 高度，只能在 webkit 无聊娱乐下</div>
        </div>
    </div>
</div>

效果如下：

（只在Chrome下有效）

 

说到最后，总结一下呢，最简单容易理解的方案，还是使用table布局，大家都懂，还易维护，兼容性又好，何乐不为呢？

 

注：IE6-7方法来自 http://www.blueidea.com/tech/web/2006/3231.asp，感谢这位前辈。