尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}xhtml
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

解决方案 »

  1.   

    上面这个代码是可以优化的:可以只用两个div嵌套解决问题。也不必要把margin设置为auto来水平居中。padding默认是0,不必设置,精简的html代码如下:
    css:
    body,html{
     margin: 0;
     background-color:#000000;
     height: 100%;


    #outer {
     position: absolute;
     width: 100%;
     top: 50%;


    #outer[id] {
     height: 100%;
     display: table;
     position: static;


    #inner {
     position: relative;
     top: -50%;


    #inner[id] {
     display: table-cell;
     vertical-align: middle;
    } div.greenBorder   {border:   1px   solid   green;   background-color:   ivory;}xhtml:
    <div   id= "outer "> 
     <div   id= "inner "   class= "greenBorder "> 
       这是优化后的代码。
     </div> 
    </div> 
      

  2.   

    再附上详细的解释: 功能:
    高度居中,适合标准与非标准浏览器。标准的以firefox为代表,非标准低饿以ie为代表。
    原理:
    使用div网页居中定位,为兼容firefox需要一个display为table的outer和display为table-cell的inner,
    然而ie不支持display,ie居中的原理是使用top属性:有一个绝对50%定位的outer和相对50%定位的inner,相减的值刚好使它
    在网页居中,这个原理等同于outer.height/2-inner.height/2。
    另外一个约束是firefox需要设置html,body,以及outer的height都为100%才能正常工作。ie定位则不能指定高度。
    这时可以使用#outer[id],在#outer[id]中与#outer冲突的设置会覆盖#outer中的设置,没有冲突的会保留设
    置。于是就有两套样式分别对应ie和firefox
      

  3.   

    补充一下:
    优化后的代码没有设置水平居中。其实可以通过改为:
    #inner { 
    position: relative; 
    top: -50%; 
    text-align:middle;

    让内容水平居中的。但更好的方法是设置div的属性例如:
    <div id="outer">
      <div id="inner" align="center">
       <img src="image/login/loginBackground.jpg" alt="登陆页面" width="1007" height="605" />
      </div>
    </div>
    这样可以选择div最左,最右,居中。只让css实现高度居中,这样就把高度居中功能单独分离出来。水平则任意。