Bootstrap 4：背景图上方容器列的垂直与水平对齐问题

Hey there! I see you've spent a solid 5 hours getting horizontal alignment sorted, but vertical centering is giving you trouble—let's fix that using Bootstrap's built-in tools instead of reinventing the wheel. The issue likely comes from not leveraging Bootstrap's flexbox-based grid system properly, which can override custom CSS you write.

The Core Problem #

Your current setup uses Bootstrap's row and col-md-10, but the row isn't set to fill the full height of its parent container, so vertical alignment classes don't have space to work with. Custom position: absolute styles can also conflict with Bootstrap's default flex layout.

Step-by-Step Solution #

We'll use Bootstrap's utility classes to achieve both horizontal and vertical alignment without extra custom CSS:

• Make containers fill full height: Add h-100 to the .container inside #intro and the row—this ensures they take up 100% of the height of #intro.
• Vertically align the column: Add align-items-center to the row—this uses flexbox to center the column vertically within the row.
• Horizontally center the column: Use mx-auto on the col-md-10 to center it horizontally (Bootstrap's equivalent of margin: auto).
• Center content inside the column: Add text-center to the column to align all inline/block elements horizontally without extra CSS.

Modified Code #

Here's your updated HTML with these changes applied:

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand" href="/">Name</a>
      <!-- Collapse button -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <!-- Collapsible content -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Links -->
        <div class="navbar-nav">
          <form class="form-inline" action="/search">
            <input class="form-control bg-dark text-light mr-sm-2 py-1" placeholder="Search" aria-label="Search" name="q" required type="search">
          </form>
          <a class="nav-item nav-link" href="#">One</a>
          <a class="nav-item nav-link" href="#">Two</a>
          <a class="nav-item nav-link" href="#">Three</a>
          <!-- Right alignment needed -->
          <a class="nav-item nav-link" href="/sign-in/"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Sign in</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- HERE - Hero image -->
  <div id="intro">
    <div class="container h-100"> <!-- Add h-100 to fill #intro's height -->
      <div class="row h-100 align-items-center">
        <div class="col-md-10 mx-auto text-center">
          <h2 class="display-4 mb-2">My website</h2>
          <hr>
          <h4 class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
          <a href="#">
            <button class="btn btn-outline-light px-4 py-2">Action <i class="fa fa-rocket" aria-hidden="true"></i></button>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

You can remove your custom CSS for .parent, .container, and .centered—Bootstrap's classes handle everything now. Keep your existing core CSS:

html, body, header, #intro { height: 100%; }
#intro {
  background: url("via.placeholder.com/2000x1000") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white;
}

Why This Works #

• Bootstrap's grid is built on flexbox, so h-100 ensures the row and container fill the available vertical space.
• align-items-center leverages flexbox to center the column vertically without messy position: absolute that can break responsiveness.
• mx-auto and text-center handle horizontal alignment cleanly without conflicting with Bootstrap's default styles.

Your sticky navbar won't interfere with this setup since #intro and header are both set to 100% height, so the navbar sits at the top while the hero content centers below it.

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