1、实现效果
实现效果
2、实现思路
（1）使用一个div中，放置3个div内容、红色方块、蓝色方块。
（2）设置div的布局为相对定位，设置红色和蓝色方块的盒子为绝对定位。
（3）设置红色方块盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移方块的一半，这样红色方块正好到中间。
（4）设置蓝色方块盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移方块的一半，这样蓝色方块正好到中间。
3、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局，相对父元素居中</title>
<style type="text/css">
body{
margin: 0px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid gray;
margin-left: 100px;
margin-top: 100px;
position: relative;
}
.div1 .div2{
position: absolute;
left: 200px;
top: 50%;
width: 10px;
height: 10px;
background: blue;
}
.div1 .div3{
position: absolute;
left: 50%;
top : 200px;
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
网友评论