如何在设置vh-100的Bootstrap列中实现内容垂直水平居中？

要让添加了vh-100的左侧列里的图片、Text1、Text2同时实现垂直+水平居中，直接用Bootstrap 5的内置Flex布局类就能搞定，无需额外自定义CSS：

具体操作 #

给左侧列的容器添加以下Bootstrap类：

• d-flex：将容器设置为flex布局
• flex-column：让内部元素保持垂直排列（维持图片、标题的原有顺序）
• justify-content-center：实现垂直方向的居中
• align-items-center：实现水平方向的居中

修改后的左侧列代码如下：

<div
  class="col-lg-6 col-sm-6 vh-100 d-flex flex-column justify-content-center align-items-center text-center d-none d-sm-block left-side"
>
  <img src="../pictures/logo.png" alt="" width="72" height="72" />
  <h1>Text1</h1>
  <h3>Text2</h3>
</div>

额外提示 #

原代码里的center-block类在Bootstrap 5中已被废弃，建议删掉，不影响功能但更符合框架规范。

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