How to vertically align that item

HTML-CSS
1

how can i vertically align the quote box(id=“root”) with the body element, i have tried this but it doesn’t seem to work:

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

https://codepen.io/BedwardVedicci/full/MWjXWJb

2

Add:

html, body {
  height: 100%;
}
1 Like
3

Thank you it worked, can you explain why it works in that case please?

4

Because block elements by default will have height of the content (in this case the height of the #root element).

1 Like
5

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