使用CSS完美实现垂直居中的方法
使用XHTML+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>
经测试,该方法也适用于图片垂直居中,建议大家在使用的时候定义好outer层的宽度。
PS:http://blog.bingo929.com/css-vertical-center.html
转载于:https://www.cnblogs.com/zytrue/p/8493598.html
使用CSS完美实现垂直居中的方法相关推荐
- [css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中:<!-- html --> <div class="outer"><di ...
- CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中 戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
- android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中
点击上面"蓝字"关注我们 你是否和小编一样在编辑一个版面时,通常用到水平居中和垂直居中,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:ce ...
- css表格怎么垂直居中对齐,css表格垂直居中怎么设置?
css设置表格垂直居中的方法:1.在表格外面嵌套一层table,用table中的td来控制居中.2.将表格放在div标签中,通过为div设置css样式display:table-cell实现垂直居中. ...
- html怎么水平居中垂直居中,css水平居中和垂直居中的几种解决方案
有时候,为了前端设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法. 一.水平居中1. ...
- 教你如何用纯CSS代码实现垂直居中
目录 方法1:设定行高 ( line-height ) 方法2:绝对定位 方法3:利用 transform 方法4:使用表格或假装表格 方法5:使用 Flexbox 十种水平垂直居中方案 : 在编辑一 ...
- CSS完美兼容IE6/IE7/FF的通用方法 ~!!!
http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法 作者:w3pop.com 翻译 ...
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16 作者:佚名 我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
- DIV CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
最新文章
- int(1) 和 int(10) 有什么区别?资深开发竟然都理解错了!
- BGP 最佳路径选择之 -- Origin
- Java程序员从笨鸟到菜鸟之(一百零八)一步一步学习webservice(二)webservice基本原理
- 笔记-高项案例题-2017年上-变更管理-需求管理
- mysql查看锁表与解锁
- 【BZOJ3451】Normal【期望线性性】【点分治】【NTT卷积】
- mysql如何管理空间_管理空间的mysql数据库
- php CURL带有验证码验证登录的例子
- LeetCode刷题笔记-回溯法-分割回文串
- Scikit-Learn 与 TensorFlow 机器学习实用指南学习笔记 3 —— 数据获取与清洗
- java小游戏实战局域网联机_结对编程3——黄金点小游戏实现局域网联机
- 卸载腾讯位置服务器,完整优雅的卸载腾讯云云服务器安全监控组件
- 网站常用JSON嵌套形式
- Orge配置Debug - 在Mac上利用Homebrew安装指定版本的Cmake
- 一个 Duang~ 的CSS3动画
- pi/4dqpsk的matlab及FPGA仿真
- 一款开源的PHP邮箱系统
- 街霸 隆(Ryu)升龙拳(Syoryuken)动画(四)制作过程中几个版本动画比较一下
- 北京2008年第29届奥运会吉祥物五个福娃(组图)
- 关于更新app时出现解析包错误