DIV垂直对齐方法整理

     css中有vertical-align的定义，不幸的是IE不支持。网上的解决方法多是设置行高。

    方法一  作为背景：

    .bg { background:url(images/bg.gif) center center no-repeat;}

    方法二 expression计算：

    <div style="padding-top:expression((document.body.clientHeight-jnkc.offsetHeight)/2)"><div id="jnkc">jnkc这里是具体内容</div></div>

   方法三 比较复杂：

    底端对齐

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="zh-CN" >
< head >
< title ></ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< style  type ="text/css"  media ="all" > ...
div,img{...}{
        margin: 0;
        padding: 0;
        border: 0;
}
#content{...}{
        width: 303px;
        height: 404px;
        background: #F63;
        color: #000;
        font: 12px Arial,Helvetica,sans-serif;
        position: relative;
}
#content div{...}{
        position: absolute;
        left: 0;
        bottom: 0;
}
</ style >
</ head >
< body >
< div  id ="content" >
         < div > 底端对齐 < br  />< img  src ="http://bbs.51js.com/images/default/logo.gif"  alt ="无忧脚本logo"  title ="无忧脚本logo"   /></ div >
</ div >
</ body >
</ html >

    居中对齐

   

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="zh-CN" >
< head >
< title ></ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< style  type ="text/css"  media ="all" > ...
div,img{...}{
        margin: 0;
        padding: 0;
        border: 0;
}
#content{...}{
        width: 303px;
        height: 404px;
        background: #F63;
        color: #000;
        font: 12px Arial,Helvetica,sans-serif;
        position: relative;
}
#content[id]{...}{
        display: table;
        position: static;
}
#middle{...}{
        position: absolute;
        left: 0;
        top: 50%;
}
#middle[id]{...}{
        display: table-cell;
        vertical-align: middle;
        position: static;
}
#inner{...}{
        position: relative;
        left: 0;
        top: -50%;
}
</ style >
</ head >
< body >
< div  id ="content" >
         < div  id ="middle" >
                 < div  id ="inner" > 垂直居中 < br  />
                         < img  src ="http://bbs.51js.com/images/default/logo.gif"  alt ="无忧脚本logo"  title ="无忧脚本logo"   />
                 </ div >
         </ div >
</ div >
</ body >
</ html >