如何使用flexbox将项目对齐到中心[重复]

Question

我正在使用 bootstrap 4 创建一个展示。我希望展示内容居中。

所以我使用带有align-items: center; 的flexbox。但由于某种原因，它不起作用。

有人能解释一下我做错了什么吗？

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 1

你的 container 类没有被赋予 css 规则。所以我添加了flex 以使用justify-content: center 规则将其垂直居中。为了使其垂直居中，您需要添加规则height: 100%，因为子选择器#showcase .showcase-content 已经包含flex 规则，并且指定align-item: center 是没有意义的。

将此选择器添加到您的 CSS：

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

第二种解决方案：

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
  margin: auto; /*add this it*/
}

.container {
    height: 100%; /*add this it*/
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 2

您可以将 margin: auto; 分配给您的展示内容类，或者您可以将此样式分配给您的容器：

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

但是由于您使用引导程序，可能此提示会中断其他代码，因此您应该为您制作另一个容器，展示内容到容器中，如下所示：

<div class="container">
    <div class="show-case-container">
      <div class="showcase-content">
</div></div></div>