五环居中
position:absolute;left:50%;top:50%;
margin-left:-190px;（-1/2的宽）
margin-top:-93px;（-1/2的高）
height186px;width:380px;居中显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;padding:0;
}
.plat{position:absolute;left:50%;top:50%;margin-left:-190px;margin-top:-93px;height186px;width:380px;}
.circle1,.circle2,.circle3,.circle4,.circle5{position:absolute;width:100px;height:100px;border:10px solid black;border-radius:50%;}
.circle4{borber-color:red;left:0;top:0;}
.circle2{borber-color:green;left:130px;top:0px;}
.circle3{borber-color:yellow;left:260px;top:0;}
.circle4{borber-color:bule;left:65px;top:70px;}
.circle5{border-color:purple;left:195px;top:70px}
</style>
</head>
<body>
<div>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</div>
</body>
</html>
两栏布局
网友评论