CSS实现水平垂直居中

把content的div在wrapper的div中水平居中垂直

           

text

CSS实现：

第一种方法

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

         background-color:#6699FF;

         width:200px;

         width:200px;

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

        top: 50%;

        left: 50%;

        margin-top:-100px ;//二分之一的height，width

        margin-left: -100px;

}

第二种方法

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

         background-color:#6699FF;

         width:200px;

         height:200px;

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

        margin：auto;

        top:0px ;

       left: 0px;

       bottom:0px;

       top:0px;

}

第三种方法

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

        background-color:#6699FF;

        width:200px;

        height:200px;

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

        top: 50%;

        left: 50%;

        -webkit-transform:translateY(-50%) translateX(-50%);

        -mos-transform:translateY(-50%) translateX(-50%);

        transform: translateY(-50%) translateX(-50%);

}

第四种方法

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;display:table-cell;vertical-align:middle;}

.content{

         background-color:#6699FF;

         width:200px;

         height:200px;

        margin:0 auto;

}