CSS 水平居中，垂直居中

CSS之居中

 

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

 

 

1．水平居中

    (1)文本、图片等行内元索的水平居中

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

代码清单1      行内元素的水平居中 

<style type="text/CSS">
 .wrap{
background:#000; 500px; height:100px;
margin-bottom:10px; color:#fff; text-align:center}
</style>
<div class="wrap">hello world</div>
<div class="wrap"><img src="test.gif" /></div>

 效果如图1，图2所示：

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

图2   图片元素行内水平居中

 

 

    (2)确定宽度的块级元素的水平居中

    确定宽度的块级元素水平居中是通过设置margin-left:auto和margin.right:auto来实现的，如代码清单2所示。

   

 

代码清单2      确定宽度的块级元素的水平居中  

 <style type="text/CSS">
 .wrap{background:#000; 500px; height:100px}
 .test{background:red; 200px; height:50px; margin-left:auto;
right:auto}
</style>
<div class="wrap"><div class="test"></div></div>

效果如图3所示。

图3    块级元素水平居中
 

 

 

    (3)不确定宽度的块级元素的水平居中

    不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

 

 

方法一如代码清单3所示。

 

 

    代码清单3     不确定宽度的块级元素的水平居中方法一

<style type="text/CSS">
ul{list-style:none; margin:0; padding:0}
table{margin-left:auto; margin-right:auto;}
 .test li{float:left; display:inline; margin-right:5px;}
 .test a{
    float:left; 20px; height:20px; text-align:center;
    line- height:20px;   background:#316AC5;
    color:#fff; border:1px solid #316AC5; text-decoration:none;}
 .test a:hover{background:#fff; color:#316AC5}
</style>
<div class="wrap">
         <table><tbody><tr><td>
                          <ul class="test">
                                <li><a href="#">1</a></li>
                          </ul>
         </td></tr></tbody></table>
         <table><tbody><tr><td>
                          <ul class="test">
                                <li><a href-"#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                          </ul>
         </td></tr></tbody></table>
         <table><tbody><tr><td>
                          <ul class="test">
                               <li><a href="#">l</a></li>
                               <li><a href="#">2</a></li>
                               <li><a href-"#">3</a></li>
                               <li><a href="#">4</a></li>
                               <li><a href-"#">5</a></li>
                          </ul>
        </td></tr></tbody></table>
</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      不确定宽度的块级元素的水平居中方法二

<style type="text/CSS">
  ul{list-style:none;margin:0;padding:0}
  .wrap{background:#000; 500px; height:100px}
  .test{text-align:center;padding:5px;}
  .test li{display:inline;}
  .test a{padding:2px 6px;background:#316AC5;color:#fff;
          border:1px solid #316AC5;text-decoration:none;}
  .test a:hover{background:#fff;color:#316AC5}
</style>
<div class="wrap">
         <ul class="test">
            <li><a href="#">1</a></li>
         </ul>
         <ul class="test">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href-"#">3</a></li>
         </ul>
         <ul class="test">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
         </ul>
</div>

 

 

  效果如图4所示。

 

 

 

   方法二换了种思路，改变块级元素的display为inline类型，然后使用text-align:center来实现居中。相较于方法一，它的好处是不用增加无语义标签，简化了标签的嵌套深度，但它也存在一定问题：它将块级元素的display类型改为inline，变成了行内元素，而行内元素比起块级元素缺少一些功能，比如设定长宽值，在某些特殊需求的CSS设置中，这种方法可能会带来一些限制。

  

 

 

  方法三如代码清单5所示

 

 

    代码清单5      不确定宽度的块级元素的水平居中方法三

 

<style type="text/CSS">
   ul{list-style:none; margin:0; padding:0}
   .wrap{background:#000; 500px; height:100px}
   .test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}
   .test li{float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
   .test  a{float:left; 20px; height:20px;
            text-align:center; line- height:20px;
            background:#316AC5;   color:#fff;
            border:1px solid #316AC5; text-decoration:none;}
   .test a:hover{background:#fff; color:#316AC5}
       </style>
<div class="wrap">
     <ul class="test">
         <li><a href="#">1</a></li>
</ul>
     <ul class="test">
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
</ul>
     <ul class="test">
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
</ul>
</div>

 

    效果如图4所示

 

 

 

    方法三通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position：relative和left:-50%来实现水平居中。它可以保留块级元素仍以display:block的形式显示，而且不会添加无语义标签，不增加嵌套深度，但它的缺点是设置了position:relative，带来了一定的副作用。

 

 

 

    这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方式可以视具体情况而定。

 

 

 

    2．竖直居中

    (1)父元素高度不确定的文本、图片、块级元素的竖直居中

    父元素高度不确定的文本、图片、块级元素的竖直居中是通过给父容器设置相同上下边距实现的，如代码清单6所示。

 

 

    代码清单6      父元素高度不确定的文本、图片、块级元素的竖直居中

 <style type="text/CSS">
 .wrap{background:#000;   500px;
       color:#fff;   margin-bottom:10px;
       padding-top:20px; padding-bottom:20px}
 .test{200px;height:50px;background:red;}
</style>
<div class="wrap">hello world</div>
<div class="wrap"><img src="54.gif" /></div>
<div class="wrap"><div class="test"></div></div>

 

 

效果如图5，图6，图7所示。

 图5   文本垂直居中

 

 图6   图片垂直居中

 

图7   块级元素垂直居中

 

 

 

    (2)父元素高度确定的单行文本的竖直居中

    父元素高度确定的单行文本的竖直居中，是通过给父元素设置line-height来实现的，line-height值和父元素的高度值相同，如代码清单7所示。

 

 

    代码清单7      父元素高度确定的单行文本的竖直居中 

<style type-"text/CSS">
 .wrap{background:#000;   500px;   color:#fff;height:100px;line- height:100px;}
</style>
<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     父元素高度确定的多行文本、图片、块级元素的竖直居中方法一

<style type="text/CSS">
.wrap{background:#000; 500px; color:#fff;height:100px}
.test{200px;height:50px;background:red;}
</style>
<table><tbody><tr><td class="wrap">
  hello world<br />
  hello world<br />
  hello world
</td></tr></tbody></table>

<table><tbody><tr><td class="wrap">
  <img src="54.gif" />
</td></tr></tbody></table>

<table><tbody><tr><td class="wrap">
  <div class="test"></div>
</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    父元素高度确定的多行文本、图片、块级元素的竖直居中方法二

<style type="text/CSS">
 .mblO{margin-bottom:10px}
 .wrap{background:#000; 500px; color:#fff;margin-bottom:10px;height:100px;
       display:table-cell;vertical-align:iddle;
       *position:relative}
 .test{200px;height:50px;background:red}
 .verticalWrap{*position:absolute;*top:50%}
 .vertical{*position:relative;*top:-50%}
</style>
<div class="mblO">
    <div class="wrap">
          <div class="verticalWrap''>
                   <div class="vertical">
                                  hello world<br />
                                  hello world<br />
                                  hello world
                   </div>
          </div>
    </div>
 </div>
 <div class="mblO">
          <div class="wrap">
                    <div class="verticalWrap">
                             <img src="54.gif" class="vertical" />
                    </div>
          </div>
 </div>
 <div class="mb10">
          <div class="wrap">
                    <div class="verticalWrap" >
                              <div class="test vertical"></div>
                     </div>
          </div>
 </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，带来了副作用。