如何在Bootstrap 4中实现布局内容的垂直居中？

问题根因 #

给列添加的align-middle没有达到预期效果，问题出在这个类的作用范围匹配错了场景：Bootstrap4中align-middle定义的垂直对齐规则，仅对行内元素、表格单元格元素生效，无法作用于基于Flex布局实现的网格列组件。Bootstrap4的网格系统依托Flexbox搭建，跨组件的垂直对齐需要使用Flex布局的专属类，错用通用垂直对齐类自然不会生效。

修正方法 #

一共两处调整即可实现所有内容的垂直居中：

• 移除两个列上无效的align-middle类，给外层承载列的row元素添加align-items-center类。这个类会让row的所有直接子列，在垂直方向上沿row的高度中线对齐。
• 提前给外层容器设置需要的展示高度：如果容器没有指定固定/最小高度，会被内部内容自动撑开至刚好包裹元素的尺寸，此时无论怎么设置垂直对齐，都不会看到居中的视觉效果。可以根据自己的布局需求，给.content或者外层容器设置对应的高度值（比如最小高度、固定区块高度、视口高度）。

修正后的完整代码 #

<div class="container">
    <!-- 示例设置区块最小高度，实际可替换为自己需要的高度值 -->
    <div class="content" style="min-height: 400px;">
        <!-- 新增align-items-center类实现Flex垂直居中 -->
        <div class="row align-items-center">
            <div class="col-6">
                <h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
                <p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.</p>
            </div>
            <div class="col-5">
                <div class="input-group">
                    <div class="form-outline">
                        <input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
                    </div>
                    <button type="button" class="btn btn-primary">
                        Ontvang offertes
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

补充场景说明 #

如果需要让某一列内部的子元素，相对于列自身的高度做垂直居中，才需要给列本身配置Flex容器属性：给列添加d-flex flex-column justify-content-center类，让列自己成为Flex容器，再让内部内容沿垂直方向居中。常规跨列整体居中的场景，直接给row加align-items-center就可以满足需求。

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