如何使用 flexbox 使容器垂直居中

Question

我正在尝试使用 flexbox 将容器垂直居中。奇怪的是它不起作用，我正在遵循 CSS 技巧中的 Flexbox 指南。

HTML：

html,
body {
  heigth: 100vh;
}

#about {
  font-family: 'Gloria Hallelujah', cursive;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about img {
  border-radius: 50%;
  width: 200px;
  heigth: 200px;
}

#about .info {
  margin-top: 50px;
}

#about .what {
  margin-top: 50px;
}

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--Custom CSS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!--Customs Fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">

<!-- Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<section>
  <div class="container">
    <div id="about">
      <div class="row mx-auto ">
        <div class="col-12 ">
          <img class="img-fluid mx-auto " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzpG8UdSTY-7yaLe4NIL8xtHTHOAcTAUpujInNMuZSUzzAuHbA">
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <p class="text-center info align-middle"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea odit est exercitationem, quod aspernatur adipisci! Esse eligendi minus nemo, earum veritatis vel delectus provident veniam numquam cumque. Illum, fugit sit?</p>
        </div>
      </div>
      <div class="row">
        <div class=col-12>
          <p class="text-center what"> My skills:
            <p>
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <p class="text-center">HTML5:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 95%">95%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">CSS3 / SaSS:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">Bootstrap:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 40%">40%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">Javascript:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 20%">20%</div>
              </div>
        </div>
      </div>
    </div>
</section>

<!-- Bootstrap Required-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--Custom Scripts-->
<script src="js/main.js"></script>

这只是我作品集的一部分，我想让它有 3 个大小相同的部分，并且整个内容垂直和水平居中。我也给你留了一个codepen。

我是否也以正确的方式编写引导程序？

Codepen：https://codepen.io/Sarithan/pen/xaNgQK?editors=1100

Answer 1

正如vertical centering 上的其他问题中所述，您尝试居中的项目的父项 必须是全高。在您的情况下，只有 html,body 具有完整高度。另外，在 parent 上使用 flexbox 将孩子居中 #about div...

• 使用h-100 也可以使section 和.container 全高。
• 使.container flexbox 和自动边距 (my-auto) 使子 #about div 垂直居中。

---

<section class="h-100">
    <div class="container h-100 d-flex flex-column">
        <div id="about" class="my-auto">
            ....
        </div>
    </div>
</section>

https://www.codeply.com/go/Ojbh66tGRt

或者，在父级上使用justify-content-center...

   <section class="h-100">
        <div class="container h-100 d-flex flex-column justify-content-center">
            <div id="about">
                ....
            </div>
        </div>
    </section>

Answer 2

在您的 body 标签中添加：

body {
    height: 100vh; /*Careful with this, you wrote it wrong.*/
    display: flex;
    align-items: center;
    justify-content: center;
}