标签：png parent 结果 技术 div居中 col class 简单 charset
直接看代码就能理解了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.parent{
position: relative;
height: 500px;
width: 500px;
background: seagreen;
}
.son{
position: absolute;
height: 100px;
width: 100px;
background: white;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">son</div>
</div>
</body>
</html>
结果如下：
PS：
top和left属性是根据父组件的高度宽度移动子部件
在top: 50%;和left: 50%;的基础上，通过设置margin-top: -50px;和 margin-left: -50px;，就能使得子部件的轴线和parent轴线重合
标签：png parent 结果 技术 div居中 col class 简单 charset
原文地址：https://www.cnblogs.com/hikki-station/p/11143414.html
