使用CSS使内容垂直居中的N中步骤

使用CSS使内容垂直居中的N中方法。
使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢?
OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论。
 
1.当待垂直居中的DIV高宽为已知时:
 
  1.1绝对定位法:
 
  CSS:
    
复制代码
    .middle-div{            width:300px;            height:200px;            position:absolute;            left:50%;            top:50%;            margin:-100px 0 0 -150px       }      .parent-div{           position:relitive;      }
复制代码

 

  html:
    
    
    <div class="parent-div">         <div class="middle-div">             <p>我是个高度已知的DIV,我里面的内容可以垂直+水平居中吗?</p>         </div>     </div>

 

 

     此方法即实现了水平居中,也实现了垂直居中。但是限制颇多,最显著的缺陷是使用了绝对定位,居中的DIV脱离了流布局,故而这种方法应用在弹出居中panel时使用较多,配合jquery:
 
    
    $(".mydiv").css({                position: "absolute",                 left: ($(window).width() - $(".mydiv").outerWidth())/2,                 top: ($(window).height() - $(".mydiv").outerHeight())/2      });  

 

 

  1.2外补DIV法:
 
  CSS:
 
    
复制代码
    .floater{         float:left;         height:50%;         margin-bottom:-120px;     }     .middle-div{         clear:both;         height:240px;         position:relitive;         background:#eee;     }
复制代码

 

  html:
       

     

    <div class="floater"></div>     <div class="middle-div"></div>

 

 

 

  1.3 margin:auto法
 
  CSS:
   
    
复制代码
    #content {         position:absolute;         top:0;         bottom:0;         left:0;         right:0;         margin:auto;          height:240px;          width:70%;           background:#eee;     }         
复制代码

 

       html:
    
 <div id="content"> </div>

 

     该方法比较简单,遗憾的是在IE6-7下是无效的。



2.当待垂直居中的对象为单行文本或图片,高宽未知时(line-height法):
     大家公认的最简洁有效的方法:设置容器height与line-height相等,另外,加上overflow:hidden防止意外发生(此处指的容器内字体大于容器高度时的意外)。


  CSS:

  
复制代码
    p.middle-p{             font:bold 12px/24px Helvertica,Arial,sans-serif;         overflow:hidden;     }      .demo{         height:24px;         color:#fff;         background:#a5a5a5;         font:bold 12px Helvertica,Arial,sans-serif;     }
复制代码
 

 

  html:

  
    <p class="demo middle-p">         文本垂直在P中居中。去掉class中的”middle-p“,再看看效果是什么?添上”middle-p“设置字体大小为30px,看看有什么效果,去掉overflow之后呢?     </p>     
 

 

     该方法的缺点是只支持单行,且当<p>中为纯文字时,兼容各浏览器;当<P>中只有图片时,IE7+可使图片垂直居中。然而在FF,chrome和IE6均无效;当<p>中有图片和文字时,在IE6中无效,在IE7+,FF,Chrome下有效。 
     让我们试着解决只有图片时,在FF,Chrome等现代浏览器下无效的情况,在上述CSS中增加:
  CSS:

    p:after{         content:',';         font-size:1px;         visibility:hidden;                    }
 
 
  html:

    
    <p class="demo middle-p">         <img src="http://img.sootuu.com/vector/2006-4/2006419181421600.jpg" height="12px" width="12px">     </p>
 
 
     OK!只有图片时在FF,Chrome下也可以垂直居中了!


3.当待垂直居中的对象为多行文本或其它,高宽未知时:

  3.1当容器高度不固定时(padding法):
  为容器添加CSS
    
    .middle-div{           padding:20px 5px;           background:#eee;      }
 
    html:
  
  
复制代码
    <div class="middle-div">         <p>你好,我在DIV中垂直居中。</p>         <p>你好,我在DIV中垂直居中。</p>         <p>你好,我在DIV中垂直居中。</p>         <p>你好,我在DIV中垂直居中。</p>     </div>     <div class="middle-div">         <img src="http://img.sootuu.com/vector/2006-4/2006419181421600.jpg">     </div>
复制代码
 

 

     使容器padding上下相等,这是最简单的一种方法。支持各浏览器。 

  3.2当容器高度固定时(display:table-cell法):
     你仍然可以使用padding,不过你需要清楚知道内容的高度和精确的数学计算...这显然是不可取的。 
     那么当容器高度固定,待垂直居中的内容又是多行时,该如何去做呢? 
     一种有效的做法是将容器display:table-cell,然后使用td,th,caption等标签专有属性:vertical-align:middle;
    CSS: 
  
复制代码
    .middle-div{           display:table-cell;           vertical-align:middle;           height:500px;           background:#eee;      }
复制代码
 
    html: 

  
复制代码
    <div class="middle-div">           <p>我想垂直居中,在一个固定高度的DIV中,可以吗?</p>           <p>我想垂直居中,在一个固定高度的DIV中,可以吗?</p>           <p>我想垂直居中,在一个固定高度的DIV中,可以吗?</p>      </div>
复制代码

 

 
     Great!在IE8+,FF,Chrome下确实有效。遗憾的是IE6-7仍然无法垂直居中,因为IE6-7并不认识:table-cell属性,将其自动忽略了。 
     也许你会想使用table布局,这样不就可以兼容IE6-7了吗。不要试图这样做,因为使用table进行页面布局早已不被赞成。html标签是负责语义的,而不是样式。不要灰心,想让内容在IE6-7下垂直居中不妨试试这种方法:
    CSS: 
  
复制代码
    .parent{           height:500px;           position:relative;           background:#eee;      }      .sub-parent{           position:absolute;           top:50%;           }      .middle-div{           position:relative;           top:-50%;      }
复制代码
 
    html: 
  
复制代码
    <div class="parent">           <div class="sub-parent">                <div class="middle-div">                     <p>我能垂直居中吗?</p>                     <p>我能垂直居中吗?</p>                     <p>我能垂直居中吗?</p>                </div>           </div>      </div>
复制代码

 

 
     让人心塞的是这种方法只在IE6-7下可行,在IE8+以及FF等现代浏览器下效果反而差强人意。为什么呢?是middle-div的top:-50%出了问题。由于父容器的高度根据子容器高度计算出来的,导致-50%无效。可能的解决办法:middle-div的top:-(使用JS得出sub-parent的高度/2)px. 
     如果你了解一些CSS hack的技巧,结合上面的display:table-cell方法,那么一个完美的垂直居中方案将会诞生: 
    html与上一致; 
    CSS:
  
  
复制代码
    .parent{           height:500px;           display:table-cell;           vertical-align:middle;           *position:relative;           background:#eee;      }      .sub-parent{           *position:absolute;           *top:50%;           }      .middle-div{           *position:relative;           *top:-50%;      }
复制代码
 
 
 
     在浏览器中看一下效果吧!这个方法看起来还不错,如果非要找一个缺点,那就是DIV嵌套多了一点. 
     当允许使用JS时,完全可以动态获得内容的高度,然后结合display:table-cell和margin-top:-(height/2)px来解决。从而避免了多层嵌套.具体方法见1.1

  3.3当容器高度固定时(display:inline-block法)

  CSS:
  
复制代码
    .parent{           height:700px;           border:1px solid #a5a5a5;             text-align:center;         }      .middle-div{           display:inline-block;           width:300px;           vertical-align:middle;           border:1px solid #f00;      }      .parent:before{           content:'';           display:inline-block;           height:100%;           vertical-align:middle;           margin-right:-0.25em;      }
复制代码
 

  html:

 

    <div class="parent">           <div class="middle-div"><p>我是否可以垂直居中?</p></div>      </div>

 

  由于使用了display:inline-block,故不兼容IE6-7.




4.小结

  使用CSS布局尤其需要注意浏览器的兼容,一个垂直居中让我初窥各浏览器兼容混战的冰山一角。
  想要掌握垂直居中,至少要了解display,position,margin,veritcla-align,line-height,padding以及float,CSS hack等知识。CSS的知识王国不就是一个个小问题堆积出来的吗?
  上述只是部分方法,可能存在错误和纰漏,欢迎指正~

相关内容推荐