CSS实现完美垂直居中
作者:ruxpinsp1 来源:蓝色理想 发布时间:2007-09-22 09:29:00
标签:居中,垂直居中,css
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 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. 支持所有浏览器
缺点:
容器不能固定高度
0
投稿
猜你喜欢
- 前段时间跟这suggest项目走,没想到这么一个小小的输入框居然会带来那么多的问题。首先来比较一下几个主流的搜索引擎的suggest效果。为
- 以下所描述无理论依据,纯属经验谈。MySQL使用4.1以上版本,管他是什么字符集,一律使用默认。不用去设置MySQL。然后举个使用GB231
- 这是为了实现一个效果,而提前作的测试代码!看起来很简单的一个东西,到这会,大约四个小时过去了。不知道是IE6的BUG;还是我自已的BUG!有
- 写好脚本,注册好服务之后,经测试,ORACLE可以随RHEL启动而启动,但不能随系统关闭而关闭。在网上找答案,发现几乎所有的设置过程帖子都是
- 终于能出来透口气,写点东西了。前段太忙,也很郁闷,现在调整过来点了。我的设计原则就是在满足需求的前提下,尽可能的简化,简化,再简化。有一次跟
- FrontPage 2003在功能上增强了不少,下面我们一起来看看新版本中比较突出的9个新功能。1.自定义浏览器分辨率预览检查 在
- 如何正确显示数据库里同时存在的GB码和BIG5码? Public Function CheckBIG(strS
- 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个
- SQL Server 2000 的 XML 功能可以简化将现有代码作为 Web 服务提供的任务。本文集中讨论了传入和传出 Transact
- [Hack] 意为”劈”、”砍”。 [Hacker] 意为”黑客”CSS Hack 是指针对不同的浏览器写不同的CSS code的过程,简单
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- 首先要作出决策,你是否想要使用最新的开发版本或最终的稳定版本。在MySQL开发过程中,同时存在多个发布系列,每个发布处在成熟度的不同阶段:&
- 我认为多选列表具有完美的功能——只需按下Ctrl键,同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框:选出你最喜爱的快餐:&nb
- 1.尽量不要对列名进行函数处理。而是针对后面的值进行处理例如where col1 = -5的效率比where -col1=5的效率要高因为后
- 查看表空间的名称及大小代码如下:SQL>select t.tablespace_name, round(sum(bytes/(1024
- 我想从文件读数据的话,要比直接从数据库快一些吧(个人观点),昨天测试了读出6000条新闻,读数据库用了23579毫秒,读文件只用了123毫秒
- JavaScript中indexOf函数方法是返回 String 对象内第一次出现子字符串的字符位置。使用方法:strObj.indexOf
- 在了解了JavaScript1.7的相关更新后,我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScri
- CSS入门很简单,规则不多,写法也比较灵活,因此也带来了很多有创意的写法。跟IE一样,很好的容错性,像《 边框样式写法总结 》所说的bord
- 更轻量- 出色的颗粒化模块,子模块划分;- 延迟加载;- 强调代码重用(公共基类、插件、扩展);更易用- 统一的API;- 便利(each,