Bootstrap 5中如何使flex容器内的row垂直居中？

你当前代码的核心问题是外层container未启用Flex布局，my-auto类只有在Flex容器中才能实现垂直居中效果，导致之前的设置无效。以下是两种可行的修改方案：

方案一：直接通过容器Flex属性实现居中 #

这种方式更简洁，无需额外嵌套容器：

<div class="container shadow min-vh-100 py-2 d-flex align-items-center justify-content-center">
    <div class="row d-flex justify-content-center w-100">
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
        <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
            <div class="mx-auto"> Widget </div>
        </div>
    </div>
</div>

方案二：保留原有嵌套结构的修改 #

如果需要保留中间的嵌套容器，可给外层容器添加垂直方向的Flex布局：

<div class="container shadow min-vh-100 py-2 d-flex flex-column">
    <div class="my-auto">
        <div class="row d-flex justify-content-center w-100">
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

• d-flex：将容器转换为Flex布局，这是所有垂直居中相关类生效的基础
• align-items-center（方案一）：让Flex容器内的子元素在垂直方向上居中
• flex-column + my-auto（方案二）：设置容器为垂直方向Flex布局，my-auto会自动填充上下空白，实现中间容器的垂直居中
• min-vh-100：确保容器高度至少占满视口高度，否则垂直居中效果无法体现

内容的提问来源于stack exchange，提问作者Dave S.