CSS 水平居中，垂直居中

CSS之居中

 
CSS的居中会遇到很多种情况，不同的情况使用的方法不同。
 
 

1．水平居中

 

    (1)文本、图片等行内元索的水平居中
    给父元素设置text-align: center可以实现文本、图片等行内元素的水平居中，如代码清单1所示。

 

代码清单1      行内元素的水平居中 
  1. <style type="text/CSS"> 
  2.  .wrap{
  3. background:#000; width:500px; height:100px; 
  4. margin-bottom:10px; color:#fff; text-align:center}  
  5. </style> 
  6. <div class="wrap">hello world</div> 
  7. <div class="wrap"><img src="test.gif" /></div> 

 效果如图1，图2所示：

文本元素行内水平居中

图1   文本元素行内水平居中

 

图片元素行内水平居中
图2   图片元素行内水平居中
 
 
    (2)确定宽度的块级元素的水平居中
    确定宽度的块级元素水平居中是通过设置margin-left:auto和margin.right:auto来实现的，如代码清单2所示。
   
 
代码清单2      确定宽度的块级元素的水平居中  
  1.  <style type="text/CSS"> 
  2.  .wrap{background:#000; width:500px; height:100px}  
  3.  .test{background:red; width:200px; height:50px; margin-left:auto;  
  4. right:auto}  
  5. </style> 
  6. <div class="wrap"><div class="test"></div></div> 

 

效果如图3所示。
块级元素水平居中

图3    块级元素水平居中
 

 
 
    (3)不确定宽度的块级元素的水平居中
    不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
 
 
方法一如代码清单3所示。
 
 
    代码清单3     不确定宽度的块级元素的水平居中方法一
  1. <style type="text/CSS"> 
  2. ul{list-style:none; margin:0; padding:0}  
  3. table{margin-left:auto; margin-right:auto;}  
  4.  .test li{float:left; display:inline; margin-right:5px;}  
  5.  .test a{
  6. float:left; width:20px; height:20px; text-align:center; 
  7. line- height:20px;   background:#316AC5;   
  8. color:#fff; border:1px solid #316AC5; text-decoration:none;}  
  9.  .test a:hover{background:#fff; color:#316AC5}  
  10. </style> 
  11. <div class="wrap"> 
  12.          <table><tbody><tr><td> 
  13.                           <ul class="test"> 
  14.                                 <li><a href="#">1</a></li> 
  15.                           </ul> 
  16.          </td></tr></tbody></table> 
  17.          <table><tbody><tr><td> 
  18.                           <ul class="test"> 
  19.                                 <li><a href-"#">1</a></li> 
  20.                                 <li><a href="#">2</a></li> 
  21.                                 <li><a href="#">3</a></li> 
  22.                           </ul> 
  23.          </td></tr></tbody></table> 
  24.          <table><tbody><tr><td> 
  25.                           <ul class="test"> 
  26.                                <li><a href="#">l</a></li> 
  27.                                <li><a href="#">2</a></li> 
  28.                                <li><a href-"#">3</a></li> 
  29.                                <li><a href="#">4</a></li> 
  30.                                <li><a href-"#">5</a></li> 
  31.                           </ul> 
  32.    </td></tr></tbody></table> 
  33. </div> 
 
 
效果如图4所示
不确定宽度的块级元素的水平居中
图4   不确定宽度的块级元素的水平居中 
 
 
 
      方法一演示了有一个分页，三个分页和五个分页的情况下，分页模块都能居中的示例。ul标签是整个分页模块的根元素，它包含的li数量不确定，所以ul本身的宽度也没办法确定，不能通过设置固定宽度，margin-left:auto和margin-right:auto来实现居中。这里用到了一个有趣的标签table来帮助实现了不确定宽度的块级元素的水平居中，table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中！将ul包含在table标签内，对table设置margin-left:auto和margin-right:auto 就可以使table水平居中，间接使ul实现了水平居中。
 
    这种做法很巧妙，但缺点是增加了无语义标签，加深了标签的嵌套层数。
 
 
 
 
    方法二如代码清单4所示
 
 
    代码清单4      不确定宽度的块级元素的水平居中方法二
  1. <style type="text/CSS"> 
  2.   ul{list-style:none;margin:0;padding:0}  
  3.   .wrap{background:#000; width:500px; height:100px}  
  4.   .test{text-align:center;padding:5px;}  
  5.   .test li{display:inline;}  
  6.   .test a{padding:2px 6px;background:#316AC5;color:#fff;
  7. border:1px solid #316AC5;text-decoration:none;}  
  8.   .test a:hover{background:#fff;color:#316AC5}  
  9. </style> 
  10. <div class="wrap"> 
  11. <ul class="test"> 
  12.           <li><a href="#">1</a></li> 
  13. </ul> 
  14. <ul class="test"> 
  15.           <li><a href="#">1</a></li> 
  16.           <li><a href="#">2</a></li> 
  17.           <li><a href-"#">3</a></li> 
  18. </ul> 
  19. <ul class="test"> 
  20.           <li><a href="#">1</a></li> 
  21.           <li><a href="#">2</a></li> 
  22.           <li><a href="#">3</a></li> 
  23.           <li><a href="#">4</a></li> 
  24.           <li><a href="#">5</a></li> 
  25. </ul> 
  26. </div> 
 
 
  效果如图4所示。
 
 
 
   方法二换了种思路，改变块级元素的display为inline类型，然后使用text-align:center来实现居中。相较于方法一，它的好处是不用增加无语义标签，简化了标签的嵌套深度，但它也存在一定问题：它将块级元素的display类型改为inline，变成了行内元素，而行内元素比起块级元素缺少一些功能，比如设定长宽值，在某些特殊需求的CSS设置中，这种方法可能会带来一些限制。
  
 
 
  方法三如代码清单5所示
 
 
    代码清单5      不确定宽度的块级元素的水平居中方法三
 
  1. <style type="text/CSS"> 
  2.    ul{list-style:none; margin:0; padding:0}  
  3.    .wrap{background:#000; width:500px; height:100px}  
  4.    .test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}  
  5.    .test li{float:left; display:inline; margin-right:5px; position:relative; left:-50%;}  
  6.    .test  a{float:left; width:20px; height:20px; 
  7. text-align:center; line- height:20px;   
  8. background:#316AC5;   color:#fff;   
  9. border:1px solid #316AC5; text-decoration:none;}  
  10.    .test a:hover{background:#fff; color:#316AC5}  
  11.        </style> 
  12. <div class="wrap"> 
  13.      <ul class="test"> 
  14.          <li><a href="#">1</a></li> 
  15. </ul> 
  16. <ul class="test"> 
  17.          <li><a href="#">1</a></li> 
  18.          <li><a href="#">2</a></li> 
  19.          <li><a href="#">3</a></li> 
  20. </ul> 
  21. <ul class="test"> 
  22.          <li><a href="#">1</a></li> 
  23.          <li><a href="#">2</a></li> 
  24.          <li><a href="#">3</a></li> 
  25.          <li><a href="#">4</a></li> 
  26.          <li><a href="#">5</a></li> 
  27. </ul> 
  28. </div> 
 
    效果如图4所示
 
 
 
    方法三通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position：relative和left:-50%来实现水平居中。它可以保留块级元素仍以display:block的形式显示，而且不会添加无语义标签，不增加嵌套深度，但它的缺点是设置了position:relative，带来了一定的副作用。
 
 
 
    这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方式可以视具体情况而定。
 
 
 

    2．竖直居中

 

    (1)父元素高度不确定的文本、图片、块级元素的竖直居中
    父元素高度不确定的文本、图片、块级元素的竖直居中是通过给父容器设置相同上下边距实现的，如代码清单6所示。
 
 
    代码清单6      父元素高度不确定的文本、图片、块级元素的竖直居中
  1.  <style type="text/CSS"> 
  2.  .wrap{background:#000;   width:500px;   
  3. color:#fff;   margin-bottom:10px; 
  4. padding-top:20px; padding-bottom:20px}  
  5.  .test{width:200px;height:50px;background:red;}  
  6. </style> 
  7. <div class="wrap">hello world</div> 
  8. <div class="wrap"><img src="54.gif" /></div> 
  9. <div class="wrap"><div class="test"></div></div> 


 

 
效果如图5，图6，图7所示。
文本垂直居中
 图5   文本垂直居中
 
图片垂直居中
 图6   图片垂直居中
 
块级元素垂直居中
图7   块级元素垂直居中
 
 
 
    (2)父元素高度确定的单行文本的竖直居中
    父元素高度确定的单行文本的竖直居中，是通过给父元素设置line-height来实现的，line-height值和父元素的高度值相同，如代码清单7所示。
 
 
    代码清单7      父元素高度确定的单行文本的竖直居中 
  1. <style type-"text/CSS"> 
  2.  .wrap{background:#000;   width:500px;   color:#fff;height:100px;line- height:100px;}  
  3. </style> 
  4. <div class="wrap">hello world</div> 
 
效果如图8所示。
 父元素高度确定的单行文本的竖直居中

图8     父元素高度确定的单行文本的竖直居中
 

 
    (3)父元素高度确定的多行文本、图片、块级元素的竖直居中
    父元素高度确定的多行文本、图片、块级元素的竖直居中有两种方法。
 
 
    方法一：说到竖直居中，CSS中有一个用于竖直居中的属性vertical-align，但只有 当父元素为td或者th时，这个vertical-align属性才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的。在Firefox和IE 8 下，可以设置块级元素的display类型为table-cell，激活vertical-align属性，但IE 6和IE 7并不支持display:table-cell，所以这种方法没办法跨浏览器兼容。但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为display:table-cell来模拟表格，那么，我们就直接使用表格好了。如代码清单8所示。其效果如图5，图6，图7所示。
 
 
    代码清单8     父元素高度确定的多行文本、图片、块级元素的竖直居中方法一
  1. <style type="text/CSS"> 
  2. .wrap{background:#000; width:500px; color:#fff;height:100px} 
  3. .test{width:200px;height:50px;background:red;}  
  4. </style> 
  5. <table><tbody><tr><td class="wrap"> 
  6. hello world<br /> 
  7. hello world<br /> 
  8. hello world  
  9. </td></tr></tbody></table> 
  10.  
  11. <table><tbody><tr><td class="wrap"> 
  12. <img src="54.gif" /> 
  13. </td></tr></tbody></table> 
  14.  
  15. <table><tbody><tr><td class="wrap"> 
  16. <div class="test"></div> 
  17. </td></tr></tbody></table> 
 
 
 
 
    因为td标签默认情况下就隐式地设置了vertical-align的值为middle，所以我们不需要再显式地设置一遍。
 
   方法一可以很好地实现竖直居中效果，且不会带来任何样式上的副作用，但它添加了无语义标签，并增加了嵌套深度。
 
 
 
 
    方法二：对支持display：table-cell的IE 8和Firefox用display：table-cell和vertical- align:middle来实现居中，对不支持display:table-cell的IE 6和IE 7，使用特定格式的hack，如代码清单9所示。其效果如图5，图6，图7所示。


 

 
代码清单9    父元素高度确定的多行文本、图片、块级元素的竖直居中方法二
  1. <style type="text/CSS"> 
  2.  .mblO{margin-bottom:10px}  
  3.  .wrap{background:#000; width:500px; color:#fff;margin-bottom:10px;height:100px;
  4. display:table-cell;vertical-align:iddle;
  5. *position:relative}  
  6.  .test{width:200px;height:50px;background:red}  
  7.  .verticalWrap{*position:absolute;*top:50%}  
  8.  .vertical{*position:relative;*top:-50%}  
  9. </style> 
  10. <div class="mblO"> 
  11.     <div class="wrap"> 
  12.           <div class="verticalWrap''> 
  13.                    <div class="vertical"> 
  14.                                   hello world<br /> 
  15.                                   hello world<br /> 
  16.                                   hello world  
  17.                    </div> 
  18.           </div> 
  19.     </div> 
  20.  </div> 
  21.  <div class="mblO"> 
  22.           <div class="wrap"> 
  23.                     <div class="verticalWrap"> 
  24.                              <img src="54.gif" class="vertical" /> 
  25.                     </div> 
  26.           </div> 
  27.  </div> 
  28.  <div class="mb10"> 
  29.           <div class="wrap"> 
  30.                     <div class="verticalWrap" > 
  31.                               <div class="test vertical"></div> 
  32.                      </div> 
  33.           </div> 
  34.  </div> 
 
    方法二．利用hack技术区别对待Fire fox、IE 8和IE 6、IE 7，在不支持display:table- cell的IE 6和IE 7 F，通过给父子两层元素分别设置top:50%和top:-50%来实现居中。这种方法的好处是没有增加额外的标签，但它的缺点也很明显，一方而它使用了hack．不利于维护，另一方面，它需要设置position：relative和position：absolute，带来了副作用。
posted @ 2013-01-06 22:46  沉睡的泰坦尼克  阅读(7168)  评论(0)  编辑  收藏  举报