html - 在背景图像上垂直和水平对齐 bootstrap 4 容器列

Question

在网上搜索了大约 5 个小时后，我得到的唯一结果是该列的每个子项都会水平排列。

我添加了导航栏，因为它有时会受到干扰。

<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">
      <div class="row">
        <div class="col-md-10">
          <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>

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;
}

我已经尝试了一系列的东西并删除了其中的大部分，但仍然有这些尝试，不过我清理了 html。

.parent {
  position: relative;
  margin: auto;
  text-align: center;
  align-items: center;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

还尝试了 d-flex 解决方案，证明解决方案和其他...

所以我现在相信这与 Bootstrap 有关，但我不知道。

编辑:忘了说了，水平对齐可以这样实现:

margin: auto;
text-align: center;
align-items: center;

在专栏上。

Answer 1

这是你的意思吗？

https://jsfiddle.net/Aorus/z3p4s0t9/1/

您缺少的是将以下类添加到您的行中；

• 对齐元素中心(vertical align class)
• 对齐内容中心 ( horizontal align class )
• h-100 ( make the height 100% )

同时将您的页眉或任何其他父级设置为高度:100%。

html,
body,
header{
  height: 100%;
}

#bg-container {
  height: 100%;
  background-image: url("http://i350.photobucket.com/albums/q409/spawn_065/galaxy.jpg");
  background-position: center;
  background-size: cover;
}

#image-container {
  position: relative;
  height: 300px;
  width:  300px;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

<div id="bg-container">

  <div class="row align-items-center justify-content-center h-100">
    <div class="col-4">
      <div id="image-container">
        Image
      </div>

    </div>
  </div>

</div>

</header>