HTML垂直居中的终极解决方案

既然说到兼容，那么就不用CSS3的 transform 写法
我采用CSS2 的 vertical-align属性
用过clearfix 的人应该知道，通过加入一个，高度为0 的元素，来清除浮动。

本文介绍的原理大致相同，通过加入一个，宽度为0，高度100%，的内联元素，来居中基线。

自定一个一个clearmid 的样式如下

.clearmid{
    height:100%;
    width: 0px;
    display:inline-block;
    vertical-align:middle;
}

将此样式应用到，要进行垂直居中的元素的第一个兄弟元素中。

<div id="father" style="height:400px">
    <div class="clearmid"></div>
    <img src="src="https://placeholdit.imgix.net/~text?txtsize=28&txt=200%C3%97300&w=200&h=300" height="200" />
    <img src="src="https://placeholdit.imgix.net/~text?txtsize=28&txt=200%C3%97300&w=200&h=300" height="300" />
</div>

此方法在IE8及以上版本好用
IE7 以下的，直接在父元素上设置 line-height == height 就好了。

效果如下：

不仅仅是图片居中？
将代码中的 img 标签换成 div ，并设置 display:inline-block 就可以啦。

---

有问题直接评论，我会回复的。