方法1：
css：
#box1 {
position: relative;
width: 600px;
height: 600px;
background: pink;
}
#box2 {
position: absolute;
width: 300px;
height: 300px;
background: yellowgreen;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
html:
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
方法2：
使用CSS3属性
#box2 {
position: absolute;
width: 300px;
height: 300px;
background: yellowgreen;
top: 50%;
left: 50%;
transform: translate(-50% -50%);
}
