css垂直居中
Posted 我的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 一定要
为什么？
请比较以下两个例子：
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <br/> <br/> <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
上一个高度是用的绝对单位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
最后附上自己写的，所有居中布局的范例网页，大家不明白可以参考。
1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Demo:: vertical align: middle</title> 7 <meta lang="en" name="author" content="Spenser Lee" /> 8 <meta lang="en" name="copyright" content="(c)2006 Liberty Studio" /> 9 <style media="screen" type="text/css"> 10 html,body,div,h1,h2,pre,dd,ol{margin: 0;padding: 0;border: 0} 11 html{min-width: 779px} 12 body{background: #fff;color: #596480;text-align: center} 13 div#main-wrapper{padding: 12px 5px;width: 769px;margin: 0 auto} 14 div,code,p,h1,h2,address,dt,dd,li{font: normal 12px/1.5em Tahoma,"Lucida Grande",Helvetica,Verdana,Lucida,Arial,"Arial Unicode",sans-serif,serif} 15 h1{font-size: 22px;font-weight: bold;border-left: 12px solid #324f96;background: #e0eaf4;color: #4868a9;height: 4em;line-height: 4em;padding: 0 12px;overflow: hidden; text-align: left} 16 h2{font-size: 12px;font-weight: bold;background: #c0014e;color: #fff;height: 2.5em;line-height: 2.5em;padding: 0 24px;overflow: hidden;margin: 12px 0;text-align: left} 17 h2 a{color: #fff;background: transparent} 18 h2 a:hover{text-decoration: none} 19 p{margin: 6px 0;padding: 0 12px 0 24px;text-indent: 2em;text-align: left} 20 p.snap-back{text-align: right} 21 code{display: block;font-family: "Courier New", Courier, monospace, mono, serif;margin: 12px auto;padding: 12px;border: 1px solid #596480;color: inherit;background: #f6f6f6;text-align: left;white-space: pre;width: 350px} 22 strong{font-weight: bold} 23 em{font-style: italic} 24 address{display: block;padding: 0 12px;margin: 12px 0;text-align: right} 25 dl{margin: 6px 0;padding: 0 12px 0 24px;text-align: left} 26 dt{margin: 0;text-indent: 2em;font-weight: bold} 27 dd{margin-left: 24px;text-indent: 2em} 28 li{list-style: square inside none;text-align: left} 29 ol#table-of-content{padding-left: 24px} 30 a{color: #c0014e;background: transparent;text-decoration: none} 31 a:hover{text-decoration: underline} 32 div.demo{width: 400px;margin: 12px auto;border: 1px solid #596480;color: inherit;background: #ffc} 33 div.demo p{text-align: left;margin: 24px;text-indent: 0} 34 p#demo-1{margin: 12px auto;padding: 0 12px;width: 400px;text-indent: 0;border: 1px solid #596480;color: inherit;background: #ffc;line-height: 4em;height: 4em;overflow: hidden} 35 div#demo-2{padding: 50px 0} 36 div#demo-4, div#demo-5{height: 300px;position: relative} 37 div#demo-4 div, div#demo-5 div{position: absolute;top: 50%;left: 0} 38 div#demo-4 p, div#demo-5 p{position: relative;top: -50%} 39 div#demo-3{display: table;height: 300px;border-collapse: collapse} 40 div#main-wrapper>div#demo-5{position: static;display:table} 41 div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static} 42 div#demo-3>div{display: table-row} 43 div#demo-3>div>div{display: table-cell;vertical-align: middle} 44 span.property{font-family: "Courier New", Courier, monospace, mono, serif;border-bottom: 1px dotted #596480;background: #ffc;color: #c0014e} 45 p.copyright{line-height: 3em;text-align: center;border-top: 1px dotted #596480} 46 </style> 47 </head> 48 <body> 49 <div id="main-wrapper"> 50 <h1>Demo of middled vertical align</h1> 51 <address> 52 Author: Spenser Lee, Liberty Studio<br /> 53 Originally posted on <a href="http://www.blueidea.com/bbs/" title="BlueIdea Forum">BlueIdea Forum</a> 54 </address> 55 <h2><a id="bullet-0">Table of centents:</a></h2> 56 <ol id="table-of-content"> 57 <li><a href="#bullet-1" title="Single line countainer with/without a fixed height">Single line countainer with/without a fixed height</a></li> 58 <li><a href="#bullet-2" title="Align multi-line container which does not have a fixed height">Align multi-line container which does not have a fixed height</a></li> 59 <li><a href="#bullet-3" title="Simulating table layout in container with a fixed height">Simulating table layout in container with a fixed height</a></li> 60 <li><a href="#bullet-4" title="IE‘s solution">IE‘s solution</a></li> 61 <li><a href="#bullet-5" title="A perfect compounded sample">A perfect compounded sample</a></li> 62 </ol> 63 <h2><a id="bullet-1">Case One: Single line countainer with/without a fixed height</a></h2> 64 <p>If you only want to display a container which only holds a single line of text, you can set <span class="property">line-height</span> property to <span class="property">height</span> property, then set <span class="property">overflow</span> to hidden.</p> 65 <p><strong>Sample:</strong></p> 66 <p id="demo-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 67 <p><strong>Core code:</strong></p> 68 <pre><code>.middle-demo-1{ 69 height: 4em; 70 line-height: 4em; 71 overflow: hidden; 72 }</code></pre> 73 <dl> 74 <dt>Notes:</dt> 75 <dd> 76 <ol> 77 <li>I strongly recommend you use relative size in <span class="property">height</span> and <span class="property">line-height</span> property. <em>Why?</em> You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the <span class="property">height</span> is no longer equal to <span class="property">line-height</span> property, thus, the layout is messed up. Using relative size as <span class="property">em, ex</span> or <span class="property">%</span> will let your countainer stretch with the content.</li> 78 <li><span class="property">overflow: hidden</span> is a must. <em>Why?</em> Same as above. Just ensure <span class="property">height</span> and <span class="property">line-height</span> are always equal.</li> 79 </ol> 80 </dd> 81 </dl> 82 <dl> 83 <dt>Pros:</dt> 84 <dd> 85 <ol> 86 <li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li>
以上是关于css垂直居中的主要内容，如果未能解决你的问题，请参考以下文章