Need a little refersher here

Why isn’t this div centered vertically? I used flex and align-items: center;

Also, how come when I use the height property for the div 50% does nothing but 50 px works?

The body needs a height and 100% is 100% of the content, not the viewport. Use 100vh instead for the height.

Or propagate the height down starting from the root (html) and all the way down as far as needed.

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#container {
  border: solid 2px red;
  width: 50%;
  height: 50px;
}

I see. Well I changed it to this but now the div still isn’t centered.

body {
  display: flex; 
  justify-content: center;
  align-items: center; 
  width: 100vh; 
  height: 100vh; 
}

#container {
  border: solid 2px red; 
  width: 50%; 
  height: 50%;
}

Guessing there’s a typo and you meant width: 100vw;

1 Like

As said, you have the wrong unit for the type of property you are setting.

vh > viewport height
vw > viewport width