把content的div在wrapper的div中水平居中垂直
<code>
<div class="wrapper">
<div class="content">text</div>
</div>
</code>
CSS实现：
第一种方法
<code>
.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;
}
</code>
第二种方法
<code>
.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;
}
</code>
第三种方法
<code>
.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%);
}
</code>
第四种方法
<code>
.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;
}
</code>
