如何基于边框位置与中线对齐<div>容器制作赛事对阵图？

不用堆叠大量<div>来调整位置，推荐用CSS Grid + 伪元素的方案，既能精准实现对齐需求，又能保持DOM结构简洁，方便后续JS交互。

核心思路 #

1. 用Grid布局划分对阵轮次，通过gap和对齐属性控制轮间位置，确保下一轮对阵项的顶部边框精准对齐上一轮两个对阵项的水平中线。
2. 用伪元素(::before/::after)绘制连接边框，替代额外的布局div，避免DOM结构混乱。

代码示例（4队对阵） #

HTML结构 #

<div class="bracket">
  <!-- 第一轮 -->
  <div class="round round-1">
    <div class="match">Team A vs Team B</div>
    <div class="match">Team C vs Team D</div>
  </div>
  <!-- 第二轮 -->
  <div class="round round-2">
    <div class="match">Winner 1 vs Winner 2</div>
  </div>
  <!-- 决赛 -->
  <div class="round round-final">
    <div class="match">Champion</div>
  </div>
</div>

CSS样式 #

/* 全局变量，方便统一修改 */
:root {
  --round-width: 200px;
  --round-gap: 40px;
  --match-gap: 60px;
  --border-color: #000;
}

.bracket {
  display: grid;
  grid-template-columns: repeat(3, var(--round-width));
  gap: var(--round-gap);
  align-items: center;
  padding: 20px;
}

.round {
  display: flex;
  flex-direction: column;
  gap: var(--match-gap);
}

.match {
  position: relative;
  padding: 10px 15px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

/* 第一轮到第二轮的水平连接线 */
.round-1 .match::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 1px;
  background-color: var(--border-color);
}

/* 第二轮的上下连接竖线+横线 */
.round-2 .match::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 50%;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.round-2 .match::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 50%;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
}

/* 第二轮到决赛的水平连接线 */
.round-2 .match:last-child::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 1px;
  background-color: var(--border-color);
  border: none; /* 覆盖之前的伪元素样式 */
}

.round-final .match::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--round-gap));
  width: var(--round-gap);
  height: 1px;
  background-color: var(--border-color);
}

关键细节说明 #

• Grid布局的align-items: center确保每轮对阵的垂直中线对齐，配合match-gap的设置，自然实现下一轮对阵项顶部与上一轮两个对阵项中线的对齐。
• 伪元素通过绝对定位和CSS变量控制位置，所有连接边框都通过样式生成，无需额外DOM元素，结构更清爽。
• 用CSS变量统一管理尺寸和颜色，后续修改对阵宽度、间距或边框样式时，只需修改变量值即可。

后续优化建议 #

• 响应式适配：添加媒体查询，在小屏幕下将Grid布局改为垂直排列（grid-template-columns: 1fr），适配移动端。
• JS交互扩展：后续只需操作.match元素的内容或类名（比如添加高亮、修改对阵结果），布局部分完全由CSS控制，无需调整结构。
• 多队扩展：如果是8队或16队的对阵，只需增加对应轮次的.round容器，复制对应伪元素样式并调整即可，复用性强。

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