Can't center a divs using CSS layouts

Question

For some reason, Whenever I try to center a div using Flexbox using align-items and justify-content, It only centers the div horizontally. I can still center text though. Thanks in advance.

Here's my code.

P.S. If it looks like the container is already vertically centered then try expanding the snippet.

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="outer-box">
    <div class="inner-box">
        <p class="box-text">
          I am not centered :(
        </p>
    </div>
  </div>

</body>
</html>

your outer box has a fixed height. set an height of 100vh for example — Sfili_81, May 03 '22 at 06:34

Andy Hoffman · Answer 1 · 2022-05-03T06:40:24.073

Your outer div is taking up block level space, but not viewport level space, which is what you want. The centering is happening, but only relative to the parent.

Add min-height: 100vh to the parent,.outer-box, and you'll have the result you're after.

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 100vh;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

html, body { margin: 0; }

<div class="outer-box">
  <div class="inner-box">
    <p class="box-text">
      I am centered :)
    </p>
  </div>
</div>

score 0 · Accepted Answer · edited May 03 '22 at 07:58

It is centered, but the height of the parent is being set by the content itself.

If you want it centered on the viewport you need to give the parent height of the viewport.

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
.outer-box {
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100vh;
}
.inner-box {
  background-color:#00c2fc;
  width:250px;
  height:130px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 35px;
  word-wrap: break-word;
  font-family:lato;
  font-weight:bold;
}

.box-text {
  text-align:center;
  padding:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="outer-box">
    <div class="inner-box">
        <p class="box-text">
          I am not centered :(
        </p>
    </div>
  </div>

</body>
</html>

Is there a way to automatically set the viewport height to 100 in VS Code? — Arq, May 03 '22 at 06:51

Can't center a divs using CSS layouts

2 Answers2