Why does the box not appear centered vertically on the page despite using justify-content and align-items in the body styling?

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<styles>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  line-height: 100px;
  margin: auto;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<styles>
  <div class="box" >Hello, World!</div>
</body>
</html>
2

Share the html code too

3

There is no reason why it shouldn’t be centered. But as said, we need the full code and context.

BTW, you can shorten it using grid with place-items or place-content

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

It is also unlikely you would want the body content to be in a row direction (unless you are really just centering a single box, in which case it doesn’t matter).

1 Like
4

Hi @CSlabbert

Use the style element, not styleS
Make sure to add the forward slash to the closing tag.
Nest the style element in the head element.

I edited your post so the code formats on the forum.

Happy coding

1 Like