DEV Community

Discussion on: Centering vertically and horizontally with CSS

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Nice. Which ones? line-height equal to height? display: flex in the container and margin:auto auto? There are a few.

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

Indeed there are. While like everyone else I use display:flex these days, it's wise to know the options:

  1. CSS tables. So you don't need to use HTML table/tr/td. A display:table container and a display:table-cell child is sufficient, and doesn't violate HTML semantics.

  2. position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:fit-content; width:fit-content; in a position:relative container.

  3. vertical align:middle on an inline-block element aligned to a single line, inline-block, middle aligned pseudo-element with height:100%;

Thread Thread
 
afif profile image
Temani Afif

yes the (2) which now can be simplified using inset:0 ;)