在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

Tips: 完美解决方案在文末！

一、单行垂直居中

　　如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

  1. 如： 
  2.  
  3. div {
  4. height:25px;
  5. line-height:25px;
  6. overflow:hidden;
  7. }

　　这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 　　<title> 单行文字实现垂直居中 </title>
  5. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 　　<style type="text/css">
  7. 　　　　body { font-size:12px;font-family:tahoma;}
  8. 　　div {
  9. 　　　　height:25px;
  10. 　　　　line-height:25px;
  11. 　　　　border:1px solid #FF0099;
  12. 　　　　background-color:#FFCCFF;
  13. 　　}
  14. 　　</style>
  15. </head>
  16. <body>
  17. 　　<div>现在我们要使这段文字垂直居中显示！</div>
  18. </body>
  19. </html>

二、多行未知高度文字的垂直居中

　　如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码：

  1. div {
  2. padding:25px;
  3. }

　　这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 　　<title> 多行文字实现垂直居中 </title>
  5. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 　　<style type="text/css">
  7. 　　　　body { font-size:12px;font-family:tahoma;}
  8. 　　　　div {
  9. 　　　　padding:25px;
  10. 　　　　border:1px solid #FF0099;
  11. 　　　　background-color:#FFCCFF;
  12. 　　　　width:760px;
  13. 　　}
  14. 　　</style>
  15. </head>
  16. <body>
  17. 　　<div>
    　　　　<pre>现在我们要使这段文字垂直居中显示！
  18. 　　　　</pre>
    　　</div>
  19. </body>
  20. </html>

三、多行文本固定高度的居中

　　　　在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

  1. div#wrap {
  2. height:400px;
  3. display:table;
  4. }
  5. div#content {
  6. vertical-align:middle;
  7. display:table-cell;
  8. border:1px solid #FF0099;
  9. background-color:#FFCCFF;
  10. width:760px;
  11. }

　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 　　<title> 多行文字实现垂直居中 </title>
  5. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 　　<style type="text/css">
  7. 　　　　body { font-size:12px;font-family:tahoma;}
  8. 　　　　div#wrap {
  9. 　　　　height:400px;
  10. 　　　　display:table;
  11. 　　　　}
  12. 　　　　div#content {
  13. 　　　　vertical-align:middle;
  14. 　　　　display:table-cell;
  15. 　　　　border:1px solid #FF0099;
  16. 　　　　background-color:#FFCCFF;
  17. 　　　　width:760px;
  18. 　　　　}
  19. 　　</style>
  20. </head>
  21. <body>
  22. 　　<div id="wrap">
  23. 　　　　<div id="content">
    　　　　　　<pre>
    　　　　　　　　现在我们要使这段文字垂直居中显示！
  24. 　　　　　　　　div#wrap {
  25. 　　　　　　　　height:400px;
  26. 　　　　　　　　display:table;
  27. 　　　　　　　　}
  28. 　　　　　　　　div#content {
  29. 　　　　　　　　vertical-align:middle;
  30. 　　　　　　　　display:table-cell;
  31. 　　　　　　　　border:1px solid #FF0099;
  32. 　　　　　　　　background-color:#FFCCFF;
  33. 　　　　　　　　width:760px;
  34. 　　　　　　　　}
  35. 　　　　　　</pre>
    　　　　</div>
  36. 　　</div>
  37. </body>
  38. </html>

　　这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

　　　　在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。

例如，我们有下面这样一个(X)HTML代码段：

　　

  1. <div id="wrap">
  2.     <div id="subwrap">
  3.         <div id="content">
  4.         </div>
  5.     </div>
  6. </div>

　　　　如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：

  1. div#wrap {
  2. border:1px solid #FF0099;
  3. background-color:#FFCCFF;
  4. width:760px;
  5. height:400px;
  6. position:relative;
  7. }
  8. div#subwrap {
  9. position:absolute;
  10. border:1px solid #000;
  11. top:50%;
  12. }
  13. div#content {
  14. border:1px solid #000;
  15. position:relative;
  16. top:-50%;
  17. }

　　当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 　　<title> 多行文字实现垂直居中 </title>
  5. 　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 　　<style type="text/css">
  7. 　　　　body { font-size:12px;font-family:tahoma;}
  8. 　　　　div#wrap {
  9. 　　　　　　border:1px solid #FF0099;
  10. 　　　　　　background-color:#FFCCFF;
  11. 　　　　　　width:760px;
  12. 　　　　　　height:400px;
  13. 　　　　　　position:relative;
  14. 　　　　}
  15. 　　　　div#subwrap {
  16. 　　　　　　position:absolute;
  17. 　　　　　　top:50%;
  18. 　　　　}
  19. 　　　　div#content {
  20. 　　　　　　position:relative;
  21. 　　　　　　top:-50%;
  22. 　　　　}
  23. 　　</style>
  24. </head>
  25. <body>
  26. 　　<div id="wrap">
  27. 　　　　<div id="subwrap">
  28. 　　　　　　<div id="content"><pre>现在我们要使这段文字垂直居中显示！
  29. 　　　　　　　　div#wrap {
  30. 　　　　　　　　　　border:1px solid #FF0099;
  31. 　　　　　　　　　　background-color:#FFCCFF;
  32. 　　　　　　　　　　width:760px;
  33. 　　　　　　　　　　height:500px;
  34. 　　　　　　　　　　position:relative;
  35. 　　　　　　　　}
  36. 　　　　　　　　div#subwrap {
  37. 　　　　　　　　　　position:absolute;
  38. 　　　　　　　　　　border:1px solid #000;
  39. 　　　　　　　　　　top:50%;
  40. 　　　　　　　　}
  41. 　　　　　　　　div#content {
  42. 　　　　　　　　　　border:1px solid #000;
  43. 　　　　　　　　　　position:relative;
  44. 　　　　　　　　　　top:-50%;
  45. 　　　　　　　　}
    　　　　　　　　</pre>
  46. 　　　　　　</div>
  47. 　　　　</div>
  48. 　　</div>
  49. </body>
  50. </html>　

五、完美的解决方案

　　那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。

  1. div#wrap {
  2. display:table;
  3. border:1px solid #FF0099;
  4. background-color:#FFCCFF;
  5. width:760px;
  6. height:400px;
  7. _position:relative;
  8. overflow:hidden;
  9. }
  10. div#subwrap {
  11. vertical-align:middle;
  12. display:table-cell;
  13. _position:absolute;
  14. _top:50%;
  15. }
  16. div#content {
  17. _position:relative;
  18. _top:-50%;
  19. }

　　　　至此，一个完美的居中方案就产生了。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 　　　<title> 多行文字实现垂直居中 </title>
  5. 　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 　　<style type="text/css">
  7. 　　　　body { font-size:12px;font-family:tahoma;}
  8. 　　　　div#wrap {
  9. 　　　　　　display:table;
  10. 　　　　　　border:1px solid #FF0099;
  11. 　　　　　　background-color:#FFCCFF;
  12. 　　　　　　width:760px;
  13. 　　　　　　height:400px;
  14. 　　　　　　_position:relative;
  15. 　　　　　　overflow:hidden;
  16. 　　　　}
  17. 　　　　div#subwrap {
  18. 　　　　　　vertical-align:middle;
  19. 　　　　　　display:table-cell;
  20. 　　　　　　_position:absolute;
  21. 　　　　　　_top:50%;
  22. 　　　　}
  23. 　　　　div#content {
  24. 　　　　　　_position:relative;
  25. 　　　　　　_top:-50%;
  26. 　　　　}
  27. 　　</style>
  28. </head>
  29. <body>
  30. 　　<div id="wrap">
  31. 　　　　<div id="subwrap">
  32. 　　　　　　<div id="content">
    　　　　　　　　<pre>现在我们要使这段文字垂直居中显示！
  33. 　　　　　　　　　　div#wrap {
  34. 　　　　　　　　　　　　border:1px solid #FF0099;
  35. 　　　　　　　　　　　　background-color:#FFCCFF;
  36. 　　　　　　　　　　　　width:760px;
  37. 　　　　　　　　　　　　height:500px;
  38. 　　　　　　　　　　　　position:relative;
  39. 　　　　　　　　　　}
  40. 　　　　　　　　　　div#subwrap {
  41. 　　　　　　　　　　　　position:absolute;
  42. 　　　　　　　　　　　　border:1px solid #000;
  43. 　　　　　　　　　　　　top:50%;
  44. 　　　　　　　　　　}
  45. 　　　　　　　　　　div#content {
  46. 　　　　　　　　　　　　border:1px solid #000;
  47. 　　　　　　　　　　　　position:relative;
  48. 　　　　　　　　　　　　top:-50%;
  49. 　　　　　　　　　　}
    　　　　　　　　</pre>
  50. 　　　　　　</div>
  51. 　　　　</div>
  52. 　　</div>
  53. </body>
  54. </html>

　　PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

六、实测可以完美实现各种浏览器兼容的居中方案　

　　　　下面这段代码经过实测，可以完美兼容IE7以上的IE浏览器，其它标准浏览器如火狐、谷歌等也没有问题。

说明：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. 　　<meta charset="utf-8">
  5. 　　<title>水平垂直居中</title>
  6. 　　<style type="text/css">
  7. 　　　　body {padding: 0; margin: 0;}
  8. 　　　　body,html{height: 100%;}
  9. 　　　　#outer {height: 100%; overflow: hidden; position: relative;width: 100%;}
  10. 　　　　#outer[id] {display: table; position: static;}
  11. 　　　　#middle {position: absolute; top: 50%;} /* for explorer only*/
  12. 　　　　#middle[id] {display: table-cell; vertical-align: middle; position: static;}
  13. 　　　　#inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */
  14. 　　　　div.greenBorder {width:500px;height:584px;background:#333;}
  15. 　　　　*+html #outer[id]{position: relative;}
  16. 　　　　*+html #middle[id]{position: absolute; }
  17. 　　</style>
  18. </head>
  19.  
  20. <body>
  21. 　　<div id="outer">
  22. 　　　　<div id="middle">
  23. 　　　　　　<div id="inner" class="greenBorder">
  24. 　　　　　　</div>
  25. 　　　　</div>
  26. 　　</div>
  27. </body>
  28. </html>

　　以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7，还需要在最下面加二句：

  1. *+html #outer[id]{position: relative;}
  2.  
  3. *+html #middle[id]{position: absolute; }

　　

　　

CSS中设置DIV垂直居中的N种方法 兼容IE浏览器的更多相关文章

  1. CSS中设置div垂直居中

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

  2. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  3. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

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

  4. CSS教程:div垂直居中的N种方法[转]

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

  5. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  6. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  7. css中设置div水平居中，margin:0px auto无用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  8. css中设置div水平居中，margin:0px auto没用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  9. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

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

随机推荐

  1. jQuery常用操作方法及常用函数总结

    一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName ...

  2. BZOJ 1922: [Sdoi2010]大陆争霸

    Description 一个无向图,到一个点之前需要先到其他点,求从第一个点到第 \(n\) 点最短时间. Sol 拓扑+Dijkstra. 跑Dijkstra的时候加上拓扑序... 用两个数组表示 ...

  3. BZOJ 1485: [HNOI2009]有趣的数列

    Description 求长度为 \(2n\) 的序列.要求 1. \(a_1<a_3<a_5<...<a_{2n-1}\) . 2. \(a_2<a_4<a_6& ...

  4. idea java 正则表达式匹配替换

    原文匹配中文 excelMap.get\((\"[\u4E00-\u9F15]+\")\) 目标 excelMap.get\($1.hashCode\(\)\)

  5. 【GoLang】GoLang struct 使用

    代码示例: package main import "fmt" type Human struct { name string age int weight int } type ...

  6. Random Pick Index

    Given an array of integers with possible duplicates, randomly output the index of a given target num ...

  7. poj 1035

    http://poj.org/problem?id=1035 poj的一道字符串的水题,不难,但就是细节问题我也wa了几次 题意就是给你一个字典,再给你一些字符,首先如果字典中有这个字符串,则直接输出 ...

  8. mysql开启binlog

    mysql开启binlog,至于为什么要开启binlog,可以google下. ## 设置server_id,一般设置为IP server_id= ## 复制过滤:需要备份的数据库名,多个库以逗号分隔 ...

  9. iOS 真机文件系统区分大小写，而模拟器可能不区分

    模拟器区不区分大小写要看mac os是不是区分大小写,而这个和你的文件系统有关,如下图 如果你使用了默认的格式,就区分不了大小写了! 看来以后还是应该使用第二种格式啊!

  10. DataTemplate应用

    在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...