css垂直居中完美的解决方案 （固定高度）

    

        

           垂直居中
        
    

.main{
    height: 400px;
    position: relative;
    display: table;
}
.item{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    width: 760px;
}

在IE6下的解决方案（在IE6下不能正确解释display:table; display: table-cell;）

    

        

           垂直居中
        
    

.main {
    border:1px solid #FF0099;
    background-color:#FFCCFF;
    width:760px;
    height:400px;
    position:relative;
}
.item {
    position:absolute;
    border:1px solid #000;
    top:50%;
}
.container {
    border:1px solid #000;
    position:relative;
    top:-50%;
}