使用CSS使内容垂直居中的N中方法。_html/css_WEB-ITnose

使用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下是无效的。

<strong>2.当待垂直居中的对象为单行文本或图片，高宽未知时（line-height法）：</strong>

 大家公认的最简洁有效的方法：设置容器height与line-height相等，另外，加上overflow：hidden防止意外发生（此处指的容器内字体大于容器高度时的意外）。<strong>　　CSS：　　</strong>

    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;    }

 

<strong>　　html：　　</strong>

    <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中增加：

<strong>　　CSS：</strong>

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

<strong>　　html:　　　　</strong>

    <p class="demo middle-p">        <img  src="http://img.sootuu.com/vector/2006-4/2006419181421600.jpg" height="12px"    style="max-width:90%" alt="使用CSS使内容垂直居中的N中方法。_html/css_WEB-ITnose" >    </p>

     OK！只有图片时在FF，Chrome下也可以垂直居中了！

<strong>3.当待垂直居中的对象为多行文本或其它，高宽未知时：</strong><strong>　　3.1当容器高度不固定时（padding法）：</strong>

<strong>　　为容器添加CSS</strong>：　　　　

    .middle-div{          padding:20px 5px;          background:#eee;     }

<strong> html:　　　　</strong>

    <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" alt="使用CSS使内容垂直居中的N中方法。_html/css_WEB-ITnose" >    </div>

 

 使容器padding上下相等，这是最简单的一种方法。支持各浏览器。 <strong>　　3.2当容器高度固定时（display：table-cell法）：</strong>

     你仍然可以使用padding，不过你需要清楚知道内容的高度和精确的数学计算...这显然是不可取的。

     那么当容器高度固定，待垂直居中的内容又是多行时，该如何去做呢？

     一种有效的做法是将容器display:table-cell，然后使用td,th,caption等标签专有属性：vertical-align:middle;

<strong> CSS: 　　</strong>

    .middle-div{          display:table-cell;          vertical-align:middle;          height:500px;          background:#eee;     }

<strong> html: </strong>

    <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下垂直居中不妨试试这种方法：

<strong> CSS: </strong>

    .parent{          height:500px;          position:relative;          background:#eee;     }     .sub-parent{          position:absolute;          top:50%;          }     .middle-div{          position:relative;          top:-50%;     }

<strong> html: </strong>

    <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方法，那么一个完美的垂直居中方案将会诞生：

<strong> html与上一致； </strong>

<strong> CSS：　　　　</strong>

    .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<strong>　　3.3当容器高度固定时（display:inline-block法）　　CSS：　　</strong>

    .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.

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