關鍵點:
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>
結果如圖:
Paste_Image.png