CSS实现完美垂直居中
作者:ruxpinsp1 来源:蓝色理想 时间:2007-09-22 09:29:00
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 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. 支持所有浏览器
缺点:
容器不能固定高度
标签:居中,垂直居中,css
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
MySQL的性能调优工具:比mysqlreport更方便的tuning-primer.sh
2008-12-08 08:37:00
ACCESS转SQL Server2000需要注意的问题
2007-11-18 15:25:00
2008年情人节各网站节日Logo欣赏
2008-02-17 14:12:00
![](https://img.aspxhome.com/file/UploadPic/20082/17/2008217141834880s.gif)
xhtml+css页面制作过程中问题的解决方案
2008-08-05 18:00:00
匿名函数的写法
2010-01-06 13:32:00
详解php如何合并身份证正反面图片为一张图片
2023-05-22 10:44:46
SQL Server 数据库备份和还原认识和总结 (一)
2012-10-07 10:52:54
![](https://img.aspxhome.com/file/UploadPic/20128/21/201282111654898s.jpg)
数据库基础:MySQL 添加用户的两种方法
2009-05-07 14:26:00
自由落体的DIV
2010-01-22 15:40:00
通过排序引导用户的行为方式
2008-05-17 09:30:00
![](https://img.aspxhome.com/file/UploadPic/20085/17/200851794651896s.gif)
再谈float菜单局中
2009-12-21 19:57:00
Oracle系统表外键的更名
2010-07-26 13:07:00
特别推荐:Web开发常用速查手册大全(100+)
2011-05-06 12:44:00
![](https://img.aspxhome.com/file/UploadPic/20115/6/1431200-63s.jpg)
记录密码的asp代码
2009-11-02 10:50:00
一个提高了近10%转化率的改进
2009-05-22 12:40:00
![](https://img.aspxhome.com/file/UploadPic/20095/22/sampa-400x582-52s.gif)
Access命令行参数
2007-08-23 15:35:00
JavaScript版无组件上传类
2007-10-06 23:16:00
用私有属性来拯救IE7缩放图片的失真
2009-03-03 13:57:00
![](https://img.aspxhome.com/file/UploadPic/20093/3/feed-22s.gif)
框架布局慎用元素
2008-12-21 16:33:00
从mysql到oracle你必须了解的50件事儿
2010-08-05 14:36:00