Need a little refersher here

HTML-CSS
1

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?

2

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;
}
3

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%;
}
4

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

1 Like
5

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

vh > viewport height
vw > viewport width

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.