如何解决三层嵌套类足球椭圆形边框容器的居中对齐问题？

问题描述 #

制作带有三种颜色的类足球样式嵌套容器时，右下角边框出现堆叠情况，调整position属性未解决，需要让所有元素正确居中。

问题示意图：

当前代码 #

CSS #

body {
  background: #0a1629;
}

.logo {
  height: 35vw;
  max-height: 270px;
  width: 65vw;
  max-width: 500px;
  border-radius: 50%;
  border: 1vw solid #c73804;
}

.middle-ring {
  height: 35.5vw;
  max-height: 274px;
  width: 65.5vw;
  max-width: 504px;
  border-radius: 50%;
  border: 1vw solid #ffffff;
}

.outer-ring {
  height: 36vw;
  max-height: 278px;
  width: 66vw;
  max-width: 508px;
  border-radius: 50%;
  border: 1vw solid #c73804;
}

HTML #

<div class="outer-ring">
  <div class="middle-ring">
    <div class="logo"></div>
  </div>
</div>

解决方案 #

核心思路 #

1. 用Flex布局实现元素自动居中，避免手动调整位置的误差
2. 通过padding替代手动计算容器尺寸，让边框层级的空间由内边距控制，彻底解决堆叠问题
3. 使用aspect-ratio保持容器原有的宽高比例，确保形状一致

修改后的代码 #

CSS

body {
  background: #0a1629;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.outer-ring {
  width: 66vw;
  max-width: 508px;
  aspect-ratio: 66/36;
  border-radius: 50%;
  border: 1vw solid #c73804;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vw;
}

.middle-ring {
  width: 100%;
  border-radius: 50%;
  border: 1vw solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vw;
}

.logo {
  width: 100%;
  border-radius: 50%;
  border: 1vw solid #c73804;
}

HTML

<div class="outer-ring">
  <div class="middle-ring">
    <div class="logo"></div>
  </div>
</div>

说明 #

• 给body添加Flex布局，让整个容器在页面中垂直、水平居中，同时消除默认margin
• 每个嵌套容器都设置display: flex; justify-content: center; align-items: center;，确保内部元素自动居中
• 用padding替代手动调整容器宽高，每层边框的空间由内边距控制，不会出现堆叠
• aspect-ratio: 66/36保证容器和原设计的宽高比例一致，避免变形

内容的提问来源于stack exchange，提问作者Peter Q