使用html+css来制作一个奥运五环，并且使它始终在浏览器的中央。本人使用的是VsCode（用起来比较简单，舒服）进行的代码的编写，浏览器是google chrome。 1.第一步：设置一个装五环的容器plat。 2.第二步：初始化

3.第三步：画圆。 本项目要画五个圆圈，所以我们设置5个div组件，使其class属性分别为circle1,circle2,circle3,circle4,circle5.然后在.css文件中设置每个圆圈的宽高属性。这里将border-radius设置为50%就可以画一个圆圈,因为div为块级元素，独占一行，所形成的五个圆就会如下： 所以我们把五个圆设置定位position: absolute;此时五个圆就都会重合，代码如下

4.第四步，分别设置每个圆圈 分别设置5个园的border-color，自己计算距离浏览器左边的left值，使得前面三个圆圈分离出来并且在同一行，即将其top值设置为0。当设置在第四个圆圈的时候，需要换行，即将其top值设置为60px即可。代码如下：

此时就能顺利画出一个五环啦！！运行效果图如下： 5.第五步：设置容器，使五环居中显示 设置plat容器，先设置其宽高正好能容下整个五环，为了使五环能随着父级容器的运动而运动，所以要给plat设置一个定位，这里的值只能是absolute，因为如果是relative五环不可能到中间去（这里我也有点不懂为什么只能设置为absolute，希望有大佬可以教教我）。 然后设置left:50%;top:50%;margin-left为负的容器的宽度的1/2， margin-top为容器height值的1/2.这样就可以使五环居中了（无论怎么移动）。代码如下：

至此，奥运五环的制作就结束了。 源码下载：奥运五环 提取码：0na3