基于中心圆形动态对齐高度可变卡片的布局实现问询

针对你遇到的卡片高度变化破坏布局的问题，以下两种方案可以实现卡片与中心圆形的相对位置始终固定，完全适配内容增减的情况：

方案一：绝对定位 + Calc + Transform（最精准控制） #

核心思路是基于容器中心和圆形半径动态计算卡片的定位基准，结合Transform实现卡片自身的居中对齐，卡片高度变化时只会向远离圆形的方向延伸，不会影响相对位置。

代码示例 #

<div class="container">
  <div class="card card-top">
    顶部卡片内容<br>多行内容测试<br>高度自适应
  </div>
  <div class="card card-right">
    右侧卡片内容<br>更多内容<br>来测试高度变化
  </div>
  <div class="card card-bottom">
    底部卡片内容
  </div>
  <div class="card card-left">
    左侧卡片内容<br>一行
  </div>
  <div class="center-circle"></div>
</div>

/* 定义全局变量方便维护 */
:root {
  --circle-size: 138px;
  --circle-radius: calc(var(--circle-size) / 2);
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 1px solid #eee;
}

.center-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: #2c3e50;
  /* 圆形始终居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card {
  width: 200px; /* 固定宽度 */
  background: #ecf0f1;
  padding: 16px;
  box-sizing: border-box;
}

/* 顶部卡片：底部对齐圆形顶部，水平居中 */
.card-top {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--circle-radius));
  transform: translateX(-50%);
}

/* 右侧卡片：左侧对齐圆形右侧，垂直居中 */
.card-right {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--circle-radius));
  transform: translateY(-50%);
}

/* 底部卡片：顶部对齐圆形底部，水平居中 */
.card-bottom {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--circle-radius));
  transform: translateX(-50%);
}

/* 左侧卡片：右侧对齐圆形左侧，垂直居中 */
.card-left {
  position: absolute;
  top: 50%;
  right: calc(50% + var(--circle-radius));
  transform: translateY(-50%);
}

方案二：CSS Grid布局（更简洁的无定位方案） #

利用Grid的网格划分和对齐属性，将圆形放在中心单元格，卡片放在对应方向的单元格中，通过align-self和justify-self控制卡片与圆形的相对位置，适配动态高度。

代码示例 #

<div class="container">
  <div class="card card-top">
    顶部卡片内容<br>多行内容测试<br>高度自适应
  </div>
  <div class="card card-right">
    右侧卡片内容<br>更多内容<br>来测试高度变化
  </div>
  <div class="card card-bottom">
    底部卡片内容
  </div>
  <div class="card card-left">
    左侧卡片内容<br>一行
  </div>
  <div class="center-circle"></div>
</div>

.container {
  display: grid;
  /* 划分三列三行，中间列/行适配圆形尺寸，两侧自动填充 */
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  width: 100vw;
  height: 100vh;
  border: 1px solid #eee;
}

.center-circle {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: #2c3e50;
  /* 放在网格中心单元格 */
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.card {
  width: 200px;
  background: #ecf0f1;
  padding: 16px;
  box-sizing: border-box;
  margin: 8px; /* 可选：与圆形的间距 */
}

.card-top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: end; /* 单元格底部对齐 */
}

.card-right {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  justify-self: start; /* 单元格左侧对齐 */
  align-self: center;
}

.card-bottom {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  justify-self: center;
  align-self: start; /* 单元格顶部对齐 */
}

.card-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  justify-self: end; /* 单元格右侧对齐 */
  align-self: center;
}

两种方案均无需固定卡片的top/right/bottom/left值，卡片高度随内容变化时，与圆形的相对接触位置会始终保持不变，彻底解决内容增减破坏布局的问题。

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