`
fantaxy025025
  • 浏览: 1308704 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

CSS实现完美垂直居中

阅读更多

转载地址:http://www.blueidea.com/tech/web/2006/3231.asp

特此感谢作者无私奉献!!

 

之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中 ,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。

首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现CSS 可以实现的,table 未必能做到。

现在来几个例子:

一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-heightheight ,并使两值相等,再加上 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 一定要
为什么?
请比较以下两个例子:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。

二、多行内容居中 ,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度

三、把容器当作表格单元
CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。

.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}

可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。

优点:
不用说了吧,就是表格,效果和表格一模一样
缺点:
IE下无效

四、以毒攻毒!用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句,IE 真的是个很烂的浏览器,CSS1中的定义都不支持,害得要我们转个大圈子来造居中 。不过就像我说的,凡是 table 布局可以实现的,CSS 一定可以实现 ,即使在 IE 里也不例外。我研究 IE layout 模式多年,还是找出了一个可以在 IE 中绝对居中 的方法。这个方法就是基于 IE layout 的 bug,也可以算以毒攻毒。至于原理,不要问我,这是独门秘学,何况三言两语也讲不清楚,只要好用就行

.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}

五、整合三和四,写出支持所有浏览器的垂直居中 容器!
思路是利用 IE 和 非IE 浏览器的 CSS hack, 整合三和四的CSS ,写出兼容主流浏览器的垂直居中 容器。具体代码就不给出了,大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器:IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器:Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器:Konqueror

最后附上自己写的,所有居中 布局的范例网页,大家不明白可以参考。


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

分享到:
评论

相关推荐

    CSS实现完美垂直居中 - 蓝色理想

    "CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器内实现精确的垂直对齐。以下是一些关于这个主题的关键知识点: 1. **单行文本垂直居中**: 对于单行文本,可以使用`line-height`属性来实现...

    [css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1

    "CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的,以下是几种常见的实现方式: 1. 容器内(Within Container) 在容器内实现垂直居中水平居中可以通过设置容器的 ...

    垂直居中显示ie7+

    在压缩包中的"垂直居中显示"文件可能包含了示例代码、CSS样式或者HTML结构,通过查看这些文件,你可以更深入地理解每种方法的实现细节。学习并熟练掌握这些技巧,将有助于你在实际开发中更好地处理垂直居中问题,...

    垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF

    "垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF"这个主题涉及到如何在各种浏览器环境下,包括Firefox和较旧的Internet Explorer版本,实现元素的完美垂直居中。 在CSS中,传统的垂直居中方法可能包括使用...

    css实现div水平、垂直居中兼容chrome、ie8

    要实现一个DIV元素在网页中水平和垂直居中,可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中,给出了几种不同的实现方式,其中一些兼容现代浏览器如Chrome,同时也兼容较...

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...

    Google浏览器CSS居中兼容问题完美解决方法

    div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!important 仅火狐firefox浏览器识别。可是在...

    表单元素垂直居中完美解决方案

    总结来说,实现表单元素垂直居中的完美解决方案主要包括正确使用`vertical-align`属性、合理设置元素的`margin`、清除默认样式、添加交互提示以及利用快捷键增强可访问性。通过这些方法,可以显著提升表单的易用性和...

    让DIV水平垂直居中的两种完美方法推荐

    总结来说,当需要将DIV元素在网页中水平垂直居中时,可以根据实际情况选择使用基于负margin的方法或CSS3 transform方法。前者在兼容性上有优势,后者在自适应布局方面表现更为出色。在设计现代网页布局时,推荐使用...

    垂直居中对齐的CSS示例代码

    本文将详细介绍一种基于CSS的垂直居中对齐方法,并结合Less预处理器来实现复用性更高的代码。 首先,核心的CSS代码如下: ```css .elment { position: relative; top: 50%; transform: translateY(-50%); } ```...

    css实现的让图片垂直居中的方法

    下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。 但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器...

    div水平垂直居中的完美解决方案

    本文主要探讨的是如何使用CSS来实现`div`元素的水平和垂直居中。我们将通过两种不同的方法来详细讲解这一主题。 首先,我们来看一种简单的方法,即实现水平居中。通过设置`div`的`margin`属性,可以轻松地使其在父...

    完美居中1

    在这个示例中,`class="my"`的`&lt;div&gt;`通过以下CSS样式实现了垂直居中: ```css .my { width: 1000px; height: 200px; margin: 0 auto; background-color: #fff; text-align: center; display: table-cell; ...

    jquery+css3实现图片圆形转动效果

    此外,为了使图片在圆形区域内居中,我们可以利用CSS的`position`、`top`、`left`属性,或者更简洁地使用`margin: auto`来实现水平和垂直居中。 在实际应用中,我们可能会结合HTML结构,如创建一个包含图片的容器,...

    CSS完美兼容通用方法

    ### CSS完美兼容通用方法 #### 一、CSS Hack详解 CSS Hack是一种技术手段,用于解决不同浏览器对CSS解析差异导致的兼容性问题。通过特定的语法编写CSS样式,可以实现针对不同浏览器显示相同或相似的效果。 ##### ...

    CSS如何让一个按钮居中应该怎么做

    如果需要实现垂直居中,还需要采取额外的CSS技巧或布局方法,如使用Flexbox或Grid布局。 在使用这些方法的时候,也需要注意浏览器的兼容性问题,不同版本的浏览器可能对某些CSS属性的支持程度不同。一般而言,现代...

    一个jquery.fullPage实例,解决了居中问题。分享给大家。

    设置父容器`display: flex`,然后添加`align-items: center`来实现垂直居中。对于老版本浏览器,可以使用绝对定位或者CSS3的`transform`属性。 在jQuery.fullPage的场景下,由于涉及到全屏滚动,我们可能需要在每个...

    CSS完美兼容IE6_IE7_FF的通用方法

    ### CSS完美兼容IE6_IE7_FF的通用方法 在网页设计与开发过程中,浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中,如何让网站同时兼容Internet Explorer 6(简称IE6)、Internet ...

    固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中

    为了实现固定宽度和高度的页面在不同分辨率的屏幕上垂直和水平居中显示,特别是需要兼容IE浏览器,通常需要采用特定的CSS技术。以下是实现该功能的知识点: 1. 使用绝对定位配合负边距实现居中: - 设置页面中需要...

Global site tag (gtag.js) - Google Analytics