CSS实现DIV完美垂直居中(支持多浏览器)
作者:ruxpinsp1 来源:蓝色理想 发布时间:2007-08-13 09:21:00
标签:div居中,css居中,垂直居中
之前看到很多人一直都问CSS 中DIV垂直居中的问题,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样。
首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现。CSS 可以实现的,table 未必能做到。
现在来几个例子:
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要
为什么?
请比较以下两个例子:
[提示:你可先修改部分代码,再按运行]
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。
二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度


猜你喜欢
- 快速入门In [1]: import time# 获取当前时间In [25]: time.strftime("%Y-%m-%d_%
- 今天我遇到一个问题,MySQL企业版备份引起I/O子系统负载过大,应用响应缓慢,导致系统不可用。所以我想限制mysqlbackup的进程,使
- 本文实例讲述了PHP实现断点续传乱序合并文件的方法。分享给大家供大家参考,具体如下:分割成多个文件发送,由于网络原因并不上先发就能发接收到。
- Numba是Python的即时编译器,在使用NumPy数组和函数以及循环的代码上效果最佳。使用Numba的最常见方法是通过其装饰器集合,这些
- 摘要:本文介绍了字符与编码的发展过程,相关概念的正确理解。举例说明了一些实际应用中,编码的实现方法。然后,本文讲述了通常对字符与编码的几种误
- vue数据变化被watch监听处理监听当前vue文件数据例如,当前的vue文件的data中有如下属性:data() {  
- python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序、去重,字典排序,字典、列表、字符串互转,时间对象操作
- 日期的转换及计算对于日期,有时需执行不同时间单位的转换,或者接受字符串格式的日期,转换为 datetime 对象。有时需计算日期的范围,以及
- pycharm永久激活码6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWV
- 1 引言形态学运算是针对二值图像依据数学形态学集合论方法发展起来的图像处理的方法.其主要内容是设计一整套的变换概念和算法,用以描述图像的基本
- 代理服务原理很简单,就拿浏览器与web服务器来说。无非是A浏览器发request给B代理,B代理再把request把送给C web服务,然后
- 视频观看视频函数的参数定义函数时,我们把参数的名字和位置确定下来,函数的接口定义就完成了。参数在函数名后的括号内指定。您可以根据需要添加任意
- 最近为了测试网速情况怎么样,由于部分业务服务器需要关闭icmp,这样的话采用普通的ping就无法适应我的需求,于是自己简单的写了一个基于tc
- Python关于mySQL的连接插件众多,Bottle下也有人专门开发的插件:bottle-mysql具体使用方法见官方,总共感觉其用法限制
- 查看版本号sqlplus / as sysdba>select * from v$version;备份orcl数据库export OR
- MySQL的binlog日志是MySQL日志中非常重要的一种日志,记录了数据库所有的DML操作。通过binlog日志我们可以进行数据库的读写
- 层的八条定律当然,这些并非真正的定律,而只是一些有益的忠告,使你免陷于使用层时可能的困顿中。原来有九条定律的,我们精简掉一条,还有下面的八条
- 在现代的 web 框架里面,基本都有实现了依赖注入的功能,可以让我们很方便地对应用的依赖进行管理,同时免去在各个地方 new 对象的麻烦。比
- 实际上face_recognition这个项目尤其是dlib更适用于Linux系统。经过我的测试,在性能方面,编译同样规格的项目,这个工具在
- 判断字段是否存在:DROP PROCEDURE IF EXISTS schema_change; DELIMITER //CREATE PR