CSS完美实现垂直居中的方法及优缺点

开发 前端
CSS实现垂直居中还是比较使用的,这里向大家介绍一下CSS实现完美垂直居中的方法以及优缺点,主要包括单行内容的居中,多行内容居中,且容器高度可变等内容。

本文和大家重点讨论一下CSS实现***垂直居中的方法和优缺点,在CSS中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,另外凡是table布局可以实现的,CSS一定可以实现。CSS可以实现的,table未必能做到。

CSS实现***垂直居中

在CSS中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和table布局一样。不过最近有人问了几个例子,看来对此的需求还不少。

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

现在来几个例子:

单行内容的居中

只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint? 

  1. .middle-demo-1{  
  2. height:4em;  
  3. line-height:4em;  
  4. overflow:hidden;  
  5. }  
  6. .middle-demo-1{  
  7. height:4em;  
  8. line-height:4em;  
  9. overflow:hidden;  
  10. }  
  11.  

优点:

1.同时支持块级和内联极元素

2.支持所有浏览器

缺点:

1.只能显示一行

2.IE中不支持等的居中

要注意的是:1.使用相对高度定义你的height和line-height2.不想毁了你的布局的话,overflow:hidden一定要。

为什么?请比较以下两个例子:

viewplaincopytoclipboardprint? 

  1. <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
  2.  
  3. Arial,sans-serif;height:24px;width:370px;"> 
  4. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  5. <br/> 
  6. <br/> 
  7. <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,  
  8.  
  9. Arial,sans-serif;height:2em;width:370px;overflow:hidden;"> 
  10. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  11. <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
  12.  
  13. Arial,sans-serif;height:24px;width:370px;"> 
  14. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  15. <br/> 
  16. <br/> 
  17. <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,  
  18.  
  19. sans-serif;height:2em;width:370px;overflow:hidden;"> 
  20. Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
  21.  

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

多行内容居中,且容器高度可变

也很简单,给出一致的padding-bottom和padding-top就行

viewplaincopytoclipboardprint? 

  1. .middle-demo-2{  
  2. padding-top:24px;  
  3. padding-bottom:24px;  
  4. }  
  5. .middle-demo-2{  
  6. padding-top:24px;  
  7. padding-bottom:24px;  
  8. }  
  9.  

优点:

1.同时支持块级和内联极元素

2.支持非文本内容

3.支持所有浏览器

缺点:容器不能固定高度

把容器当作表格单元

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

viewplaincopytoclipboardprint? 

  1. .middle-demo-3{  
  2. display:table-cell;  
  3. height:300px;  
  4. vertical-align:middle;  
  5. }  
  6. .middle-demo-3{  
  7. display:table-cell;  
  8. height:300px;  
  9. vertical-align:middle;  
  10. }  
  11.  

可惜IE不支持这些属性,不过在其他浏览器上显示效果非常***。要注意的是:和一个合法的元素必须在

里一样,display:table-cell元素必须作为display:table的元素的子孙出现。

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

缺点:IE下无效#p#

用IE的bug解决IE中的绝对居中

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

viewplaincopytoclipboardprint? 

  1. .middle-demo-4{  
  2. height:300px;  
  3. position:relative;  
  4. }  
  5. .middle-demo-4div{  
  6. position:absolute;  
  7. top:50%;  
  8. left:0;  
  9. }  
  10. .middle-demo-4divdiv{  
  11. position:relative;  
  12. top:-50%;  
  13. left:0;  
  14. }  
  15. .middle-demo-4{  
  16. height:300px;  
  17. position:relative;  
  18. }  
  19. .middle-demo-4div{  
  20. position:absolute;  
  21. top:50%;  
  22. left:0;  
  23. }  
  24. .middle-demo-4divdiv{  
  25. position:relative;  
  26. top:-50%;  
  27. left:0;  
  28. }  

整合三和四,写出支持所有浏览器的垂直居中容器!

思路是利用IE和非IE浏览器的CSShack,整合三和四的CSS,写出兼容主流浏览器的垂直居中容器。具体代码就不给出了,大家权当作练习练习。例子可以在下面的附录中找到。

最终实测支持的浏览器:IE6+,Mozilla1.7,NetscapeNavigator8,Opera8.0+,Firefox1.0+和Safari1.0+IE5下需要加上对合适模型的补正。

推测支持的浏览器:Mozilla1.5+,NetscapeNavigator7+,Opera7+未测试浏览器:Konqueror
 

【编辑推荐】

  1. 剖析CSS十大经典用法
  2. CSS Sprites样式生成工具用法详解
  3. FireFox和IE中CSS兼容技巧汇总
  4. CSS代码整理及优化七大原则
  5. 深入剖析Firefox下 margin-top失效原因与解决方案

 

 

责任编辑:佚名 来源: nowamagic.net
相关推荐

2010-08-26 11:27:35

CSS居中

2010-09-13 17:43:59

CSS单行内容居中

2010-08-31 15:07:45

CSS居中

2010-09-02 13:03:38

CSS垂直居中

2010-08-27 10:30:16

CSS垂直居中

2010-09-02 09:59:52

CSS SpritesCSS

2010-08-27 09:45:49

CSS Sprites

2010-08-24 14:47:48

CSS居中

2012-05-03 09:58:19

VLANVLAN划分

2021-07-26 08:31:17

算法

2010-08-16 16:07:30

DIV垂直居中

2018-09-18 11:20:07

css html5javascript

2010-09-09 10:23:23

DIVCSS垂直居中

2010-09-01 10:49:57

CSS水平居中垂直居中

2022-12-20 15:17:29

CSS开发

2010-08-26 10:21:06

CSS Sprites

2020-05-26 11:39:05

WebReact组件

2010-08-24 09:05:20

CSS+DIV

2010-08-23 10:50:39

DIV+CSS

2010-08-26 15:08:08

DIV高度
点赞
收藏

51CTO技术栈公众号