Indeed there are. While like everyone else I use display:flex these days, it's wise to know the options:
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.
position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:fit-content; width:fit-content; in a position:relative container.
vertical align:middle on an inline-block element aligned to a single line, inline-block, middle aligned pseudo-element with height:100%;
Soy desarrollador full stack y tengo el gusto de sumarme a DEV Community con un claro objetivo 🎯 "Sumar y aportar material en español dentro de esta grandiosa plataforma" 😉✨
I am a developer. and I like a couple of methods not mentioned here.
Nice. Which ones?
line-height
equal to height?display: flex
in the container andmargin:auto auto
? There are a few.Indeed there are. While like everyone else I use
display:flex
these days, it's wise to know the options:CSS tables. So you don't need to use HTML table/tr/td. A
display:table
container and adisplay:table-cell
child is sufficient, and doesn't violate HTML semantics.position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:fit-content; width:fit-content;
in aposition:relative
container.vertical align:middle
on an inline-block element aligned to a single line, inline-block, middle aligned pseudo-element with height:100%;yes the (2) which now can be simplified using
inset:0
;)so could you mention those methods?
There was a follow up comment with three methods: dev.to/alohci/comment/1l4c4
And Temani Afif added an alternative.