CSS未知高度垂直居中

出处   http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html。

< html lang = "en" >
  < head >
    < meta charset = "utf-8" />
    < meta content = "IE=8" http-equiv = "X-UA-Compatible" />
    < title >司徒正美 CSS垂直居中 title >
    < style type = "text/css" >
      .container{
        width:500px;/*装饰*/
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }

    style >
  head >
  < body >
    < h1 >垂直居中（table） h1 >
    < div class = 'container' >
        < table width = "100%" height = "100%" >
            < tr >
               < td align = "center" valign = "middle" >
                  < img src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               td >
           tr >
       table >
   div >

  body >
html >

垂直居中（table）

运行代码

好了，我们看其CSS实现。凡是table能做到的，CSS都能做的，但各浏览器在CSS的差异比较大，因此要兼容它们难度很大。这涉及许多细节，各种流啊，display的表现效果与CSS hack，IE早些年搞了大堆的私有属性，这也有待我们深一步挖掘。我们先看最简单的实现，背景图片法——

背景图片法

< html >
< head >
< title >司徒正美 CSS垂直居中 title >
< style type = "text/css" >
.container {
  width:500px;
  height:500px;
  line-height:500px;
  background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;
  border:1px solid #f00;
  text-align: center;
}

style >

head >
< body >
< h1 >垂直居中（背景图片法） h1 >
< div class = "container" >

div >
body >
html >

垂直居中（背景图片法）

运行代码

CSS表达式法

< html lang = "en" >
  < head >
    < meta charset = "utf-8" />
    < meta content = "IE=8" http-equiv = "X-UA-Compatible" />
    < title >司徒正美 CSS垂直居中 title >
    < style type = "text/css" >
      .container{
        /*IE8与标准游览器垂直对齐*/
        display: table-cell;
        vertical-align:middle;
        width:500px;/*装饰*/
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }
      .container img{
        display:block;/*让其具备盒子模型*/
        margin:0 auto;
        text-align:center;
        margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
      }
    style >
  head >
  < body >
    < h1 >垂直居中（CSS表达式） h1 >
    < div class = "container" >
      < img src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    div >
  body >
html >

垂直居中（CSS表达式）

运行代码

绝对定位法

< html lang = "en" >
  < head >
    < meta charset = "utf-8" />
    < meta content = "IE=8" http-equiv = "X-UA-Compatible" />
    < title >司徒正美 CSS垂直居中 title >
    < style type = "text/css" >
      div {
       /*IE8与标准游览器垂直对齐*/
        display:table-cell;
        vertical-align:middle;
        overflow:hidden;
        position:relative;
        text-align:center;
        width:500px;/*装饰*/
        height:500px;
        border:1px solid #ccc;
        background:#B9D6FF;
      }
      div p {
        +position:absolute;
        top:50%
      }
      img {
        +position:relative;
        top:-50%;
        left:-50%;
      }

    style >
  head >
  < body >
    < h1 >垂直居中(绝对定位) h1 >
    < div class = "container" >
      < p >
        < img src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      p >
    div >
  body >
html >

垂直居中(绝对定位)

运行代码

display:inline-block法

< html lang = "en" >
  < head >
    < meta charset = "utf-8" />
    < meta content = "IE=8" http-equiv = "X-UA-Compatible" />
    < title >司徒正美 CSS垂直居中 title >
    < style type = "text/css" >
      div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }

    style >


  head >
  < body >
    < h1 >垂直居中(inline-block法) h1 >
    < div class = "container" >
      < i > i >
      < img src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    div >
  body >
html >

垂直居中(display:inline-block法)

运行代码

writing-mode法

< html lang = "en" >
  < head >
    < meta charset = "utf-8" />
    < meta content = "IE=8" http-equiv = "X-UA-Compatible" />
    < title >司徒正美 CSS垂直居中 title >
    < style type = "text/css" >
      div{
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
        background:#B9D6FF;
        border:1px solid #f00;
      }
      div span{
        height:100%\9;
        writing-mode:tb-rl\9;
      }
      div img{
        vertical-align:middle
      }
    style >
  head >
  < body >
    < h1 >垂直居中(writing-mode法) h1 >
    < div class = "container" >
      < span >
        < img src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      span >
    div >
  body >
html >

垂直居中(writing-mode)

运行代码

记得淘宝也搞一个font-size法，但我觉得上下差异比较大，就不收录了。怿飞的博客亦提到过一韩国人有个巧妙的实现，但日久链接失效了，谁收藏了也请提供一下。