元素竖直居中的实现

前文中，我们讲了元素水平居中的实现方法，今天我们要提到的是有关竖直居中的实现方法。

1. 父元素高度不确定的文本、图片、块级元素的竖直居中

父元素高度不确定的文本、图片、块级元素的竖直居中是通过给父容器设置相同的上下边距实现的，如以下代码清单所示：

<style type=”text/css”>.wrap{background:#000;width:500px;color: #fff;margin-bottom:10px;padding-top:20px;padding-bottom:20px;}.test{width:200px;height:100px;background:red;}</style><div class=”wrap”>hello world</div><div class=”wrap”><img src=”baby.jpg” alt=”test”/></div><div class=”wrap”><div class=”test”></div></div>

效果如下图所示：

2. 父元素高度确定的单行文本的竖直居中

父元素高度确定的单行文本的竖直居中，是通过给父元素设置line-height来实现的，line-height值和父元素的高度相同，如以下代码清单所示：

<style type=”text/css”>.wrap{background:#000;width:500px;color: #fff;height:100px;line-height:100px;}</style><div class=”wrap”>hello world</div>

效果如下图所示：

3. 父元素高度确定的多行文本、图片、块级元素的竖直居中

父元素高度确定的多行文本、图片、块级元素的竖直居中有两种方法。

方法一：说道竖直居中，css中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性才会生效，对于其他块级元素，例如div、p等，默认情况下是不支持vertical-align属性的。在Firefox和IE8下，可以设置块级元素的display类型为table-cell，激活vertical-align属性，但IE6和IE7并不支持display:table-cell，所以这种方法没办法跨浏览器兼容。但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为display:table-cell来模拟表格，那么，我们就直接使用表格好了。如以下代码清单所示：

<style type=”text/css”>.wrap{background:#000;width:500px;color: #fff;height:200px;}.test{width:200px;height:100px;background:red;}</style><table><tbody><tr><td class=”wrap”>hello world<br/>hello world<br/>hello world</td></tr></tbody></table><table><tbody><tr><td class=”wrap”><img src=”baby.jpg” alt=”test”/></td></tr></tbody></table><table><tbody><tr><td class=”wrap”><div class=”test”></div></td></tr></tbody></table>

效果图如下所示：

因为td标签默认情况下就隐式地设置了vertical-align的值为middle，所以我们不需要再显式地设置一遍。

方法一可以很好的实现竖直居中效果，且不会带来任何样式上的副作用，但它添加了无语义标签，并增加了嵌套深度。

方法二：对支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的IE6和IE7，使用特定格式的hack，如以下代码清单所示：

<style type=”text/css”>.mb10{margin-bottom:10px;}.wrap{background:#000;width:500px;color: #fff;height:200px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;}.test{width:200px;height:100px;background:red;}.verticalWrap{*position:absolute;*top:50%;}.vertical{*position:relative;*top:-50%;}</style><div class=”mb10″><div class=”wrap”><div class=”verticalWrap”><div class=”vertical”>hello world<br/>hello world<br/>hello world</div></div></div></div><div class=”mb10″><div class=”wrap”><div class=”verticalWrap”><img class=”vertical” src=”baby.jpg” alt=”test”/></div></div></div><div class=”mb10″><div class=”wrap”><div class=”verticalWrap”><div class=”test vertical”></div></div></div></div>

方法二利用hack技术区别对待Firefox、IE8和IE6、IE7，在不支持display:table-cell的IE6和IE7下，通过给父子两层元素分别设置top:50%和top:-50%来实现居中。这种方法的好处是没有增加额外的标签，但它的缺点也很明显，一方面它使用了hack，不利于维护，另一方面，它需要设置postion:relative和position:absolute，带来了副作用。

注：本文大部分例子来自于曹刘阳的《编写高质量代码-Web前端开发修炼之道》，再次对原作者表示感谢，并向大家极力推荐此书！