如何在Bootstrap列中垂直居中内容且保留响应式布局

开发者阿泽

2026-7-30

解决方案

要实现黄色列内文本垂直居中，同时保持<h2>和正文上下排列，且保留原有的响应式布局，只需调整黄色列的Flex布局方向即可：

给黄色列的div添加d-flex flex-column justify-content-center类：
- d-flex：开启Flex布局
- flex-column：设置Flex主轴为垂直方向，让内部元素（<h2>和文本）上下排列
- justify-content-center：在垂直主轴上居中对齐内容（因为主轴是垂直的，所以实现垂直居中）

修改后的完整代码如下：

<div class="container-fluid">
    <div class="row g-5 justify-content-center">
        <div class="col-lg-8">
              <div class="row">
                <div class="col-sm-6 d-flex flex-column justify-content-center" style="background-color:yellow;">
                    <h2>Heading Here</h2><br>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <div class="col-sm-6" style="background-color:pink;">
                  <img class="img-fluid" src="img2.png">
                </div>
            </div>
        </div>
    </div>
</div>