Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=cbf8d5a9-ef07-4aba-9060-d2f09f32d0fa

CHULETA: Cómo centrar elementos HTML con CSS

¿Cómo? ¿Centrar un elemento? ¿Y para eso necesitamos una chuleta?...

Pues lo cierto es que sí. A pesar de la de años que HTML lleva entre nosotros, todavía sigue siendo complicado centrar los elementos, sobre todo verticalmente.

En los navegadores más modernos la mejor opción es usar Flexbox, pero hoy por hoy si queremos que nuestra web funcione bien en todo tipo de navegadores (al menos los que tienen hasta 6 o 7 años), no es una opción.

Para poder centrar un elemento hay que considerar un montón de posibilidades y actuar de manera diferente según el caso. Hay que tener en cuenta si el elemento es de bloque o en línea, si conocemos de antemano sus dimensiones o no, si se centra sobre sí mismo o sobre otro elemento...

Para facilitarte la vida, hemos creado una chuleta en forma de diagrama que te ayudará a encontrar la mejor manera de centrar un elemento con CSS de manera rápida. Solo tienes que seguir las líneas según cada caso para encontrar la solución:

Centrar-con-CSS

El diagrama lo puedes descargar en PDF (135 KB):

Cómo centrar elementos con CSS y no morir en el intento

Además hemos creado un archivo de prueba en el que se muestra un ejemplo sencillo de cada uno de los casos para que puedas comprobarlos. El archivo es campusMVP-Centrado-Elementos-CSS-Ejemplos.html (4,66KB).

Descarga el PDF, imprímelo y pégalo en la pared para tenerlo a mano siempre :-)

Fecha de publicación:
campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.