Bootstrap 5：避开Navbar实现Div占满剩余高度以垂直居中文本

方法一：利用Flex布局让文本容器占据剩余高度 #

核心思路是通过Bootstrap自带的Flex类改造页面布局，让导航栏之外的内容容器自动填充剩余高度，同时实现内部文本居中，无需额外自定义CSS：

1. 修改<body>的类，保留h-100的同时添加d-flex flex-column，让body成为垂直方向的Flex容器：

<body class="h-100 d-flex flex-column" style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">

2. 调整文本所在的<div>，移除h-100类，添加flex-grow-1（让容器自动占据导航栏下方的剩余高度），保留d-flex align-items-center justify-content-center实现内部内容居中：

<div class="container-fluid d-flex align-items-center justify-content-center flex-grow-1">

修改后的完整代码 #

<!doctype html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./css/overrides.css" rel="stylesheet">
    <link href="./css/colors.css" rel="stylesheet">
    <link rel="icon" href="./images/favicon.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="h-100 d-flex flex-column" style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
    <nav class="navbar navbar-expand-lg sticky-top mt-auto">
        <div class="mx-auto text-center">
            <a class="navbar-brand" href="#"><img src="./images/logo_desktop.png" width="200"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid d-flex align-items-center justify-content-center flex-grow-1">
        <div class="row text-light">
            <div class="col-md-12 col-sm-12 text-center">
                <h1 class="display-1">IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
            </div>
        </div>
    </div>
</body>
</html>

原理说明 #

• d-flex flex-column让body的子元素（导航栏和文本容器）垂直排列
• flex-grow-1让文本容器自动填充导航栏下方的剩余视口高度，避免总高度超过视口导致溢出
• align-items-center justify-content-center确保文本容器内部的内容同时实现垂直和水平居中

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