html结构为:
<div id='div2'>
<div id='div1'></div>
</div>
css代码为:
#div2{
height:300px;width:300px;
border:1px red solid;
text-align:center;
margin:auto;
}
#div1{
height:50px;width:50px;
position: relative;
top: 50%;
transform: translateY(-50%);
border:1px red solid;
margin:auto;
}
其中最核心的css是这三行
position: relative;
top: 50%;
transform: translateY(-50%);
为了浏览器兼容性,需要在transform属性前添加浏览器前缀