Método para centrar un elemento horizontal/verticalmente de manera más fácil

[metacortex]

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:

.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.