CSS杂集（标准流&多行垂直居中）

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_30716725

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/listenRain/p/3183069.html

这部分网上教程说的较多，不多说了，放上代码存档。

  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属性能够模拟&lt;table&gt;，可以使用这个属性来让&lt;div&gt;模拟&lt;table&gt;，这样就可以使用vertical-align了。<br/>注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个&lt;div&gt;元素。    
 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; width:760px;">
10     <div style="width:100%; height:30px; background:#F6F;">header</div>
11     <div style="width:30%; height:100px; float:left; background:#CCC;">div1</div>
12     <div style="width:40%; height:150px; float:left; background:#3C6;">div2</div>
13     <div style="width:30%; height:80px; float:left; background:#630;">div3</div>
14     <div style="clear:both"></div>
15     <div style="width:100; height:50px; background:#C36;">footer</div>
16 </div>
17 </body>
18 </html>