使用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层的宽度。
本文链接:http://blog.bingo929.com/css-vertical-center.html
分享到:
相关推荐
CSS实现完美垂直居中 - 蓝色理想
主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
当定义了 Text 的 height 属性时,在 Text 中输入的文字都不是垂直居中的,不过你可以添加CSS来控制它,让输入的文字垂直居中,使网页更完美。 复制代码代码如下: <html> <head> <style type=”text...
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下,感兴趣的朋友可以参考下哈
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中。...
但是实际在浏览器中实现起来的效果并不是很完美,由于各浏览器的解析都各不相同,所以在各浏览器都会有1px-3px的偏差。方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,...
6.11 垂直居中 6.12 折叠标签 6.13 CSS数据图表 6.13.1 初级样式(进度条) 6.13.2 复合样式(滑动条) 6.13.3 柱状图 6.14 切换样式表(网站换肤) 6.15 XHTML与CSS校验 6.15.1 XHTML校验器 6.15.2 CSS校验器 6.16 Flash...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
压缩包内包含使用CSS实现各中完美垂直居中DEMO分享。 最终实测支持的浏览器:IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。 推测支持的...
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学,有需要的朋友可以参考下
在ie7下显示非常完美,用firefox一测试,乖乖一探糊涂 惨不忍睹。经过一番研究发现兼容很 简单。 1、增加 div {overflow: hidden;},目的就是让div自动适应内容高度 2、横排的div外套div 另外设定 ul { margin: 0...