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弹性框和自动边距（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;
}

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

2 个答案: