HTML & CSS · Junior · Question 31 of 75
Which approach correctly centers a block horizontally and vertically inside its parent?
- 1On the parent:
text-align: center; vertical-align: middle; line-height: 100% - ✓Correct answer: On the parent:
display: flex; justify-content: center; align-items: center - 3On the child:
margin: autowithout any parent styles
Explanation
Flexbox with justify-content and align-items: center is the most common approach (Grid alternative: display: grid; place-items: center). text-align centers only inline content, and vertical-align doesn't work for blocks. margin: auto on a regular block centers only horizontally (and only with a set width); vertically it works inside flex/grid.