How to vertically align that item

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

Add:

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

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

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

1 Like