使用Bootstrap实现div垂直居中及页面元素布局问题求助

需求回顾 #

• Header固定顶部、水平居中，H3与导航组之间留间距
• Main区域水平+垂直居中，文本右对齐

问题分析&修正方案 #

1. Header部分修正 #

原代码用float类和justify-content-around导致布局混乱、间距控制失效，改用Bootstrap flex布局类优化：

• 给header内的包裹div添加container d-flex justify-content-between align-items-center py-2：container保证内容水平居中且适配屏幕宽度，justify-content-between自动拉开H3和导航的间距，align-items-center让元素垂直居中，py-2给header留上下内边距
• 移除H3的float-md-start和导航的float-md-end，浮动会破坏flex布局逻辑
• 保留fixed-top确保header固定在顶部

2. Main区域垂直居中修正 #

垂直居中的核心是父容器必须占满可用高度，原代码mx-auto my-auto失效是因为父容器无高度约束：

• 给最外层根div添加min-vh-100 d-flex flex-column，让它占满整个视口高度，同时用flex垂直排列header和main容器
• 将main的外层div替换为flex-grow-1 d-flex align-items-center justify-content-end：flex-grow-1让容器占满header之外的剩余空间，align-items-center实现垂直居中，justify-content-end让内容靠右对齐
• 给main添加text-end类，确保文本右对齐

修改后的完整代码 #

<div class="min-vh-100 d-flex flex-column">
  <header class='fixed-top'>
    <div class="container d-flex justify-content-between align-items-center py-2">
      <h3 class="mb-0">Ethan Leyden</h3>
      <nav class="nav nav-masthead">
        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
        <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
        <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
      </nav>
    </div>
  </header>

  <div class="flex-grow-1 d-flex align-items-center justify-content-end">
    <main class="text-end px-4">
      <h1>Welcome to the site</h1>
      <p class="lead">It's definitely still under construction. Do you know how to vertically center content with Bootstrap? I sure don't</p>
      <p class="lead">
        <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
      </p>
    </main>
  </div>
</div>

注：原代码中用的是className（React语法），如果是纯HTML请替换为class，上述代码已统一为class

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