使用Bootstrap时如何将3个div在页面居中？已水平对齐但填充内容后错位

问题根因 #

• 容器居中逻辑错误：仅设置top: 40%没有做自身高度偏移修正，也未设置水平居中属性，无法实现屏幕完全居中
• 列重叠：Bootstrap默认.col是等分页面宽度，你左右卡片固定了18rem宽度，当中间内容宽度 + 左右卡片总宽度超过行宽时就会挤压重叠
• 绝对定位参考异常：未给body设置100%视口高度，绝对定位的容器没有正确的定位参考基准

修复代码 #

CSS部分 #

/* 先补充body的基础配置，你的背景图样式可以继续保留在body里 */
body {
  min-height: 100vh;
  margin: 0;
}
.container {
  position: absolute;
  /* 水平+垂直居中核心代码 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 限制容器最大宽度避免溢出 */
  width: 100%;
  max-width: 1400px;
  font-family: Lemon Milk;
}
/* 列对齐配置，避免错位挤压 */
.row > .col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#middle {
  text-align: center;
  color: white;
  /* 给中间列设置最小宽度，避免被左右卡片挤压 */
  min-width: 400px;
}

HTML优化建议 #

你当前左右两个卡片的div都用了id="desc"，重复ID会导致后续JS操作异常，建议改成不同的ID（比如desc-left、desc-right）。
如果要适配小屏避免列错位，可把row标签改成<div class="row gy-4 gx-4">，给列之间增加间距。

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