使用CSS完美实现垂直居中的方法

  使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka Yuhů发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖:

先来看看实例效果Demo

该CSS垂直居中的条件:

1.已有一个已定义高度的容器(如<div>)
2.内部有一个未知高度的对象(也许是后台动态生成的文本,放在另一个<div>中)
3.我想让内部的对象在容器内垂直居中。
4.不使用HTML的表格(table元素),也不使用Javascript。 

该CSS垂直居中的方法:

最大的问题:IE浏览器的Bug。

  大部分浏览器能理解CSS中的display:table之类的表格方式声明,但IE7及其以下的旧版IE无法理解这个声明。

解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中,让IE7及以下版本用自己理解高度的Bug来解决居中问题。

IE Bug: 

IE7及以下版本理解高度的Bug:如果a容器内有b对象,a容器并没有设置高度值,如果b对象有实际内容(如文字),那么就会将a的高度理解为与b相等。那么如果对b采取相对定位,b就会相对于在a中的原始位置移动(主要利用百分比高度)。

eg:a未定义高度,b的高度为100px,将b相对定位,并设top:-50%

在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b的高度)上移50%,也就是50px 。

如何仅让IE7及以下版本理解对它们的声明?

1.Pixy曾发明underscore hack,就是在每个CSS属性前加一个下划线”_”,这个hack是专门针对IE6及以下版本的,也就是说IE7无法理解。如:_position:absolute;  所以这种hack就PASS!
2.在属性前加”#”的声明正好可以仅让IE7及以下版本理解,而其它任何浏览器都无法理解这个”#”,所以”#”后的声明就会被其它浏览器忽略掉。 OK~~就这个!

兼容性:

  目前为止兼容直到IE8.x的所有IE浏览器、Gecko核心浏览器(Mozilla,Firefox,Netscape 7)、Opera 7、Webkit核心浏览器(Safari及Google Chrome)。

代码:

CSS部分:

#outer {
       display:table;
       height:400px;
       #position:relative;
       overflow:hidden;
}
#middle {
       display:table-cell;
       vertical-align:middle;
       #position:absolute;
       #top:50%;

#inner {
       #position:relative;
       #top:-50%;


XHTML部分:

<div id=”outer”>
    <div id=”middle”>
        <div id=”inner”>
           <!–这里是要垂直居中的内容–>
        </div>
    </div>
</div> 

预览效果Demo(在Demo源代码中附加了一些用于修饰的CSS声明,大家可以忽略)

经测试,该方法也适用于图片垂直居中,建议大家在使用的时候定义好outer层的宽度。

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/css-vertical-center.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作

22 Comments

发表评论

  • 匿名
    2016-07-05

    205555555555588485
    685588865675455808988880000088
    859028
    529885

  • 朝心 » 60+CSS技巧教程资源大全
    2015-10-15

    […] 使用CSS完美实现垂直居中的方法 […]

  • a3
    2013-11-28

    IE hack 可以用*position:relative;
    IE678都通过

  • [转贴] 简洁纯净的CSS表单设计实例 – Sense's Blog
    2013-04-07

    […] 《使用CSS创建三列固定布局结构》 《使用CSS完美实现垂直居中的方法》 《通过不同的CSS设计字体大小来提高用户体验》 […]

  • 换行文字垂直居中的CSS写法 | 小张的前端天地
    2012-08-07

    […] 其实文字换行不仅仅只有br标签这样一种方式,只要宽度够小,那么多余的字必然会挤下去的。所以代码的难点就只是如何让换行的文字垂直居中。在以前的文章中写到过图片垂直居中的方法,就是IE8及以上版本使用display:table的方式,IE6 7使用font-size来撑开图片的位置,但这样的方式不适合换行的文字。查了一些资料,找到一篇文章还是写的蛮不错的,顺利地解决了我的问题:使用CSS完美实现垂直居中的方法。最后还是提供一个demo给大家: […]

  • 学无止境的CSS(xHTML+CSS技巧教程资源大全) | 徐福坤,个人博客
    2012-05-19

    […] 使用CSS完美实现垂直居中的方法 […]

  • 花心岛
    2012-03-13

    IE7测试了一下,视觉上是居中了,可是你把三层div都用border显示出来的时候,会发现inner是与middle交错的,布局上并不好用,不能称之为完美,所以还有待改进。

  • 3d camera
    2011-05-14

    I like what you guys tend to be up too. This type of clever work and reporting! Keep up the great works guys I’ve you guys to my blogroll.

  • atwind
    2011-05-04

    好杯具,打开就是左侧的。Chorme

  • starry
    2010-08-04

    这个CSS的方法真是挺好,不过我发现加到我目前的页面中后,导致我原来的jQuery文字滑动效果变得很很卡慢了。
    希望谁能完善一下呀。

    导致卡的地方是:光标移动缩略图上时,底下滑出的文字速度变卡了。
    http://www.aoyea.com/CaseWeb/UI/

    QQ:89103618