Quizás algunos ya lo conozcan pero yo lo acabo de descubrir :D. Consiste en un método alternativo para centrar un elemento horizontal y/o verticalmente respecto al elemento padre o a la página. Me parece mucho más flexible que los que conocía hasta el momento.
La cosa es simple, se trabaja con posicionamiento absoluto:
Código CSS:
Ver original.cuadro {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Las opciones de centrado:
- Se posiciona en "0"
left y right para un centrado
horizontal.
- Se posiciona en "0"
top y bottom para un centrado
vertical.
- Se posiciona en "0" lo
4 lados para un centrado
total.
Y el ingrediente final (importante):
- margin: auto;
Veámoslo en funcionamiento:
La parte 'flexible' que le veo a esto, es que no es necesario hacer cosas como resetear la altura de html o body ni recurrir a trucos enredados. Además, el centrado puede aplicarse respecto al elemento padre si éste tiene un posicionamiento definido. Me encanta. Espero les sea útil.