本文转载与:http://blog.bingo929.com/css-vertical-center.html
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka Yuhů发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖:
该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>
分享到:
相关推荐
CSS实现垂直居中的5种方法
css实现垂直居中的5种方法,慢慢总结的哦
NULL 博文链接:https://ice-cream.iteye.com/blog/293997
DIV+CSS 图片垂直居中效果
CSS实现完美垂直居中 - 蓝色理想
css图片垂直居中方法
最近上网上找了些关于CSS实现垂直居中的方法,方法挺多,下面就我看到的几种好方法在这里说明一下,使用 CSS 实现垂直居中并不容易。
...
...
为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 方法1:table-cell html结构: XML/HTML Code复制内容到剪贴板 box1>...
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高(line-height) 添加伪元素 calc...
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
给大家整理四种css实现垂直居中效果,思路明了非常不错,具有参考借鉴价值,需要的朋友参考下吧
NULL 博文链接:https://gucaihe.iteye.com/blog/1465144
最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目...但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌? •方式一 :table 布局方法
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下