Centrar verticalmente con CSS
Este es el código css que utilizo para centrar verticalmente en su parent elementos con alto variable:
|
1 2 3 4 5 6 7 8 9 10 11 |
.son-centered:before{ content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .centered { display: inline-block; vertical-align: middle; } |
Con este CSS basta con añadir al padre la clase «son-centered» y al hijo que queremos centrar la clase «centered».
Si también queremos centrarlo horizontalmente basta con añadir:
|
1 2 3 |
.son-centered{ text-align:center; } |
Es compatible con IE8+, y lo saqué de CSS-Tricks.
Podéis verlo en funcionamiento aquí.