如何实现Bootstrap列内文本与相邻图片中心点垂直对齐

核心原因 #

左侧响应式图片高度随视口宽度动态变化，固定高度方案无法跟随图片高度同步调整，必然出现位置偏移。

方案1：使用Bootstrap原生类（推荐，无需额外自定义CSS） #

直接给栅格的.row添加align-items-lg-center类即可，修改后完整代码如下：

<div class="container">
    <div class="row align-items-lg-center">
        <div class="col-lg-8">
            <div class="image">
                <img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
            </div>
        </div>
        <div class="col-lg-4">
            <div class="text">
                <h1>Text Title</h1>
            </div>
        </div>
    </div>
</div>

实现逻辑 #

• Bootstrap 4/5版本的.row默认采用flex布局，align-items-lg-center仅在屏幕宽度≥lg断点（默认992px，即桌面端场景）生效，作用是让行内的栅格列垂直居中对齐
• 该状态下两列高度自动适配自身内容，中线完全重合：左侧列高度与图片渲染高度完全一致，中线就是图片的垂直中心点；右侧列高度与内部文本块高度一致，中线就是文本的垂直中心点，刚好满足对齐需求
• 屏幕宽度小于lg断点时，该类样式不生效，两列自动堆叠为100%宽度，按正常文档流排列，不会破坏移动端默认布局

方案2：自定义CSS实现（兼容Bootstrap3及自定义需求场景） #

如果使用Bootstrap3等非flex布局的老版本，或需要更灵活的位置调整，可以通过媒体查询配合定位实现，CSS代码如下：

/* 仅桌面端场景生效 */
@media (min-width: 992px) {
  .col-lg-4 {
    position: relative;
  }
  .col-lg-4 .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    /* 适配Bootstrap栅格默认槽宽，避免内容贴边 */
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
}

实现逻辑 #

• 通过媒体查询限制样式仅在桌面端生效，移动端保持默认堆叠布局，不受定位影响
• 给右侧列设置相对定位作为定位上下文，内部文本块绝对定位到列高度50%的位置，再通过transform: translateY(-50%)向上偏移自身高度的一半，让文本块中心点与列高度50%位置重合
• 栅格默认带拉伸等高特性，右侧列高度始终与左侧图片高度保持一致，因此无论图片随视口如何缩放，对齐位置都不会出现偏移

注意事项 #

• 不要给右侧列或文本块设置固定高度，响应式场景下图片高度为动态计算值，固定高度必然在视口变化时导致错位
• 如果右侧文本内容较多，可适当调整列的内边距，避免文本溢出覆盖左侧图片区域

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