这部分网上教程说的较多，不多说了，放上代码存档。
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 body{ 8 font-size:12px; 9 } 10 #table1{ 11 border-collapse:collapse; 12 } 13 #table1 td,th{ 14 border: 1px #666 solid; 15 } 16 /*hack*/ 17 div#wrap { 18 display:table; 19 border:1px solid #FF0099; 20 background-color:#FFCCFF; 21 width:760px; 22 height:400px; 23 _position:relative; 24 *position:relative; 25 overflow:hidden; 26 } 27 div#subwrap { 28 vertical-align:middle; 29 display:table-cell; 30 _position:absolute; 31 _top:50%; 32 *position:absolute; 33 *top:50%; 34 } 35 div#content { 36 _position:relative; 37 _top:-50%; 38 } 39 /*hack*/ 40 </style> 41 </head> 42 43 <body> 44 <h1>单行文本垂直居中</h1> 45 <div style="border:2px #666 solid; background:#CCC; height:60px; line-height:60px; text-align:center;"> 46 单行文本居中比较简单，只要容器的line-height和height等高即可。 height:60px; line-height:60px; 47 </div> 48 <hr /> 49 <h1>多行文本垂直居中</h1> 50 <h2>approach1<blockquote>使用table布局</blockquote></h2>. 51 table布局简单易操作 52 <table id="table1" cellpadding="0"> 53 <tr> 54 <td height="60px" valign="top">垂直顶部</td> 55 <td valign="middle">垂直居中，使valign="middle"属性</td> 56 <td style=" vertical-align:bottom">垂直底部，使style=" vertical-align:bottom"属性</td> 57 </tr> 58 </table> 59 <hr /> 60 <h2>approach2<blockquote>父容器高度不定</blockquote></h2> 61 <div style=" border:1px #666 solid; background: #CCC; padding:30px;"> 62 <p>父容器高度不定的情况下，使用padding是非常方便的做法</p> 63 <p>padding:30px;</p> 64 </div> 65 <hr /> 66 <h2>approach3<small>父容器高度固定</small></h2> 67 <div style="border:1px #666 solid; background: #CCC; height:100px; display:table;"> 68 <div style="border:1px #F00 solid; background:#FFCCFF; display:table-cell; vertical-align:middle;"> 69 父容器的父容器height:100px; display:table;<br/> 70 f父容器display:table-cell; vertical-align:middle;<br/> 71 CSS中有一个display属性能够模拟<table>，可以使用这个属性来让<div>模拟<table>，这样就可以使用vertical-align了。<br/>注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。 72 </div> 73 </div> 74 <hr /> 75 <h2>approach3<small>使用绝对定位法</small></h2> 76 <div style="border:1px solid #FF0099; background-color:#FFCCFF; height:150px; position:relative;"> 77 <div style="position:absolute; top:50%;"> 78 <div style="border:1px solid #000; position:relative; top:-50%;"> 79 使用绝对定位法实现多行文本垂直居中<br/> 80 height:100px; position:absolute; top:50%; margin-top:-50px;<br /> 81 如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中ernet Explorer 6,7中的垂直居中：<br/> 82 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 83 </div> 84 </div> 85 </div> 86 <div style="border:1px solid #FF0099; background-color:#FFCCFF; height:80px; position:relative;"> 87 <div style="position:absolute; top:50%;"> 88 <div style="border:1px solid #000; position:relative; top:-50%;"> 89 使用绝对定位法实现多行文本垂直居中<br/> 90 height:100px; position:absolute; top:50%; margin-top:-50px;<br /> 91 如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中ernet Explorer 6,7中的垂直居中：<br/> 92 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 93 </div> 94 </div> 95 </div> 96 <hr /> 97 <h2>approach4<small>hackv</small></h2> 98 <div id="wrap"> 99 <div id="subwrap"> 100 <div id="content"> 101 <pre>现在我们要使这段文字垂直居中显示！ 102 </pre> 103 </div> 104 </div> 105 </div> 106 </body> 107 </html>
至于float导致盒子模型超出标准流，以前不太明白，趁机写个代码强化一下。
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <div style="background:#FFF; 760px;"> 10 <div style="100%; height:30px; background:#F6F;">header</div> 11 <div style="30%; height:100px; float:left; background:#CCC;">div1</div> 12 <div style="40%; height:150px; float:left; background:#3C6;">div2</div> 13 <div style="30%; height:80px; float:left; background:#630;">div3</div> 14 <div style="clear:both"></div> 15 <div style="100; height:50px; background:#C36;">footer</div> 16 </div> 17 </body> 18 </html>