垂直居中——父元素高度确定
设置父元素的height和line-height的值相等
垂直居中——父元素高度不确定
多行文本,图片,块状元素的垂直居中有:
- 插入table(包括tbody,tr td)标签,同时设置vertical-align:middle;这个vertical-align:middle只在父元素为th、td时才生效。
html代码
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
css代码
table td{
height:500px;
background:#ccc
}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
2. 在chrome,firefox及IE8以上的浏览器可以设置块级元素的display为table-cell,以激活vertical-align,但是IE6,7不支持