前文中,我们讲了元素水平居中的实现方法,今天我们要提到的是有关竖直居中的实现方法。
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前端开发修炼之道》,再次对原作者表示感谢,并向大家极力推荐此书!