为何元素无法垂直居中且纵向排列？Bootstrap布局问题咨询

问题出在两个核心点：左侧列没有足够高度支撑垂直居中，且flex容器默认横向排列导致元素挤在一起。按以下步骤修改即可实现需求：

1. 给左侧列设置高度支撑 #

给.left-side添加全屏高度，让内部元素能在垂直方向上有居中的空间，在自定义CSS里添加：

.left-side {
  min-height: 100vh;
}

2. 调整flex容器的排列方向与对齐规则 #

把左侧内部包裹元素的类，从d-flex align-items-center justify-content-center text-center修改为d-flex flex-column justify-content-center align-items-center text-center：

• flex-column：强制flex子元素纵向排列，每个元素单独占一行
• justify-content-center：让整个内容块在垂直方向上居中
• align-items-center：让每个元素自身在水平方向上居中
• text-center：保持文字内容居中对齐

3. 可选：添加元素间距优化视觉 #

如果需要让图片和文字之间有空白，用Bootstrap内置间距类即可，比如给图片加mb-4，给h1加mb-3，让布局更宽松美观。

修改后的左侧区域完整代码 #

<div class="col-md-4 col-lg-6 left-side">
  <div class="d-flex flex-column justify-content-center align-items-center text-center">
    <img src="../pictures/logo.png" alt="" width="72" height="72" class="mb-4"/>
    <h1 class="mb-3">text1</h1>
    <h3>text2</h3>
  </div>
</div>

修改完成后，图片、text1、text2就会在左侧列内垂直居中，每个元素单独占一行，整体保持水平居中，完全匹配你想要的效果。

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