首先居中：
width: 100px;
height: 100px;
border: 10px solid yellow;
position: fixed; //fixed是下拉也居中保持不变，absolute是居中下拉会变。
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px; //不要忘记50%和-50px；
下面就是五环：
<!DOCTYPE html>
<html>
<head>
<title>居中</title>
<link rel="stylesheet" type="text/css" href="juzhong.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
.box1{
width: 100px;
height: 100px;
border: 10px solid red;
position: fixed;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -50px;
border-radius: 50%;
}
.box2{
width: 100px;
height: 100px;
border: 10px solid yellow;
position: fixed;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
}
.box3{
width: 100px;
height: 100px;
border: 10px solid blue;
position: fixed;
left: 50%;
top: 50%;
margin-left: 75px;
margin-top: -50px;
border-radius: 50%;
}
.box4{
width: 100px;
height: 100px;
border: 10px solid black;
position: fixed;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: 5px;
border-radius: 50%;
z-index: 1;
}
.box5{
width: 100px;
height: 100px;
border: 10px solid orange;
position: fixed;
left: 50%;
top: 50%;
margin-left: 25px;
margin-top: 5px;
border-radius: 50%;
z-index: 1;
}
效果如下：
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
