Bootstrap框架下如何实现h1标签垂直居中对齐

现有问题 #

使用Bootstrap开发前端页面时，需要将首屏section内的h1标签实现垂直居中，原有代码如下：

<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Secion One-->
    <section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
        <div class="container">
            <div class="row align-items-center text-center">
                <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
            </div>
        </div>
    </section>
</body>

问题原因 #

align-items-center是Flex布局下的垂直对齐属性，只有父容器有明确的高度时才能生效。当前section和row都没有设置足够的垂直高度，所以对齐属性不生效。

调整方案 #

直接用Bootstrap原生工具类修改section部分的代码即可，不需要额外写自定义CSS：

<!--Secion One-->
<section class="bg-dark text-light p-5 p-lg-0 d-flex align-items-center min-vh-100">
    <div class="container w-100">
        <div class="row text-center">
            <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
        </div>
    </div>
</section>

修改说明 #

• 给section新增d-flex类：将当前区块设置为Flex布局
• 给section新增align-items-center类：让Flex布局下的子元素垂直居中对齐
• 给section新增min-vh-100类：设置区块最小高度为100%视口高度，保证有足够的垂直空间实现居中效果
• 给container新增w-100类：保证容器宽度占满父元素，避免内容出现水平错位
• 移除row上多余的align-items-center属性，对齐逻辑已经提至外层处理，结构更简洁

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