css设置div垂直居中显示

css设置div垂直居中显示：

css样式：

.parent{
 width:100%;
 height:700px;
 background-color: cyan;
 position: relative;
}

.child{
 width:400px;
 height:400px;
 background-color:#000;
 position: absolute;  
 left: 50%;
 top: 50%;
 margin-left: -200px;  
 margin-top: -200px;
}

 

html结构:

<div class="parent">
 <div class="child"></div>
</div>