how to vertically center a container using flexbox

Question

I'm trying to use flexbox to vertically center a container. Strangely it's not working, I'm following the Flexbox guide from CSS tricks.

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>

This is just one section of my portfolio, I want to make it have 3 sections that are the same size and the whole content to be vertically and horizontally centered. I'm leaving you a codepen as well.

Am I writing my bootstrap the right way also?

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

Just some quick advice for your bootstrap syntax. You need to specify the class prefix on your **col-** classes. In your case, if you want to have the column 100% width from mobile to desktop, then the class is `col-xs-12`. Please refer to this: https://getbootstrap.com/docs/3.3/css/#grid — Cnye, Sep 24 '18 at 13:48

Carol Skelly · Answer 1 · 2018-09-24T14:05:56.963

As explained in other questions on vertical centering, the parent of the item you're trying to center needs to be full height. In your case, only the html,body have full height. Also, use flexbox on the parent to center the child #about div...

Use h-100 to make the section and .container full height too.
Make the .container flexbox and auto-margins (my-auto) to vertical center the child #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

Or, use justify-content-center on the parent...

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

score 0 · Answer 2 · answered Sep 24 '18 at 14:09

0

To your body tag, add:

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

answered Sep 24 '18 at 14:09

Nacorga

507
4
17

how to vertically center a container using flexbox

2 Answers2