html - 如何使用 flexbox 将项目对齐到中心

Question

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

所以我将 flexbox 与align-items: center;. 但由于某种原因它不起作用。

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

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

标签： htmlcssbootstrap-4flexbox

Answer 1

你的container班级没有CSS规则。所以我添加flex到它使用justify-content: center规则垂直居中。为了使其垂直居中，您需要添加 rule 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>