MoreLesson 240Free preview

Center Vertically

This lesson is part of How To · All levels

Summary

Vertically centering elements can now be done with modern, compact CSS. Flexboxes with align-items: center and Grid with place-items: center are the most flexible options. For special cases, absolute positioning with transform is still useful when elements have to overlap other content.

Key points

Parent flex with align-items: center center the child vertically; add justify-content: center to horizontal.
Grid with place-items: center centering items in one declaration.
Absolute with top: 50% and centered elements to parent position: relative.
Parent must have a clear height for vertical centering to be visible.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.