关键点:
1、父级相对定位,子级绝对定位。
2、子级的left和top值均设置为50%
3、设置子级width和height
4、子级的margin:1/2height 0 0 1/2width(margin-top 0 0 margin-left)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#father{
width:300px;
height: 400px;
position:relative;
background: green;
}
#son{
width:100px;
height:200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
background: yellow;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
结果如图: