在网页中间显示一个同心圆

网页文件1.html

以下是css文件 1.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.father{position: relative;}
.son{position: relative;top:50%;left: 50%;margin-top: -75px;margin-left: -75px;}

/*同心圆：中间黑，然后是绿、红*/

#div1{

position: absolute;

width:150px;
height:150px;
background-color: red;
border-radius: 50%;
}

#div2{
position: absolute;
width:100px;
height:100px;
margin-left: 25px;
margin-top: 25px;
background-color: green;
border-radius: 50%;
}

#div3{
position: absolute;
width: 50px;
height: 50px;
margin-left: 25px;
margin-top: 25px;
background-color: #000;
border-radius: 50%;
}