浮动元素的垂直居中

关于浮动元素的垂直居中问题

方法一、已知元素的宽高

#div1{

        background-color: rgb(201,32,39);

        width:200px;

        height:200px;

        position:absolute;             /*需要为父元素添加相对定位*/

        top:50%;

        height:50%;

        margin-top:-100px;          /*设置为宽度与高度的二分之一*/

        margin-left:-100px;

}

 

方法二、未知元素的宽高

#div2{  

    width: 200px;

    height: 200px;

    background-color: #6699FF;

    margin:auto;

    position: absolute;        /*父元素需要相对定位*/

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

}

 

 

三、img元素的垂直居中

设置img容器vertical-align:middle;