Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Método para centrar un elemento horizontal/verticalmente de manera más fácil en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/08/2014, 09:36
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.025
Antigüedad: 15 años, 4 meses
Puntos: 832
Método para centrar un elemento horizontal/verticalmente de manera más fácil

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
  1. .cuadro {
  2. position: absolute;
  3. left: 0;
  4. right: 0;
  5. top: 0;
  6. bottom: 0;
  7. margin: auto;
  8. }

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.

Etiquetas: elemento, html, manera, página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:55.