Tres soluciones copiables para centrar horizontal y verticalmente sin trucos frágiles.
Centrar con Flexbox
Para un elemento dentro de un contenedor, display:flex; justify-content:center; align-items:center suele ser suficiente. justify-content alinea sobre el eje principal y align-items sobre el cruzado. Si el contenedor no tiene altura disponible, no notarás el centrado vertical esperado.
.contenedor { display: flex; justify-content: center; align-items: center; min-height: 50vh; }Centrar con CSS Grid
display:grid; place-items:center es una alternativa concisa cuando hay un elemento que centrar en ambos ejes. Si necesitas columnas o zonas más complejas, Grid ofrece control bidimensional. Selecciona una herramienta según la estructura y evita posicionamiento absoluto salvo que el diseño lo requiera.
.contenedor { display: grid; place-items: center; min-height: 50vh; }Centrar un bloque con márgenes
Para un contenedor de ancho limitado, max-width: 64rem; margin-inline:auto lo centra horizontalmente. Esto no centra su texto ni lo coloca verticalmente. Es un patrón útil para la anchura máxima de contenido en páginas.
Errores frecuentes
text-align:center centra contenido en línea pero no siempre el bloque. Un height:100% sin altura definida en los ancestros puede no producir el resultado esperado. Prueba también móvil, texto largo, zoom del navegador y contenido dinámico.
Preguntas frecuentes
¿Qué opción es mejor para un único elemento?
Grid con `place-items:center` es muy práctico, pero Flexbox también funciona.
¿Puedo centrar un div sin darle tamaño fijo?
Sí. Normalmente es preferible utilizar tamaños fluidos y `max-width`.
Documentación y fuentes para ampliar
¿Quieres aplicar estas ideas en tu proyecto?
Cuéntanos tu sector, objetivo y web actual. Prepararemos una propuesta con el alcance y las prioridades que realmente necesites, sin compromisos ni tarifas inventadas.
Solicitar información ↗