Cómo centrar un div en CSS
Centrar elementos web es una tarea habitual que suele dar guerra al maquetar. Si buscas cómo centrar div css de forma directa, esta herramienta te permite seleccionar el eje y el método deseado para obtener las reglas CSS listas para usar. Copia el código resultante a tu proyecto sin necesidad de consultar tutoriales extensos.
Cómo centrar un div en HTML
Alinear un contenedor hijo dentro de su contenedor padre requiere utilizar las propiedades adecuadas en tu hoja de estilos. Esta herramienta interactiva calcula el código necesario según la combinación elegida.
- Selecciona el eje de alineación: horizontal, vertical o ambos ejes a la vez.
- Elige el método técnico que prefieras: Flexbox, CSS Grid o posicionamiento absoluto.
- Comprueba el resultado en la vista previa y copia el bloque CSS generado directamente a tu código.
Centrar div horizontal y vertical
Para situar un elemento justo en el centro del contenedor padre en ambas direcciones existen tres soluciones estándar. Con Flexbox, debes aplicar display: flex, justify-content: center y align-items: center en el padre.
Con CSS Grid, el proceso es aún más directo: basta con asignar display: grid y place-items: center al contenedor padre. Si utilizas posicionamiento absoluto, el padre necesita position: relative, mientras que el elemento hijo requiere position: absolute, desplazamientos de top: 50% y left: 50%, y la propiedad transform: translate(-50%, -50%) para compensar su propio tamaño.
Centrar div horizontalmente o verticalmente CSS
Si solo necesitas ajustar un eje, las propiedadesvarían. Para centrar div horizontalmente con Flexbox o Grid, se aplica justify-content: center sobre el contenedor padre. En posicionamiento absoluto se asigna left: 50% junto a transform: translateX(-50%) en el hijo.
Para centrar div verticalmente en CSS, Flexbox y Grid emplean align-items: center en el contenedor padre. Si usas posicionamiento absoluto, la regla equivalente para el elemento hijo es top: 50% combinada con transform: translateY(-50%).
Centrar elemento CSS: cuál método elegir
Flexbox es el método idóneo cuando el contenedor padre organiza varios elementos hijos en fila o columna, ya que es el modelo de maquetación más extendido y fácil de mantener.
CSS Grid es la alternativa más limpia cuando buscas centrar en ambos ejes con la menor cantidad de código posible. Por su parte, el posicionamiento absoluto debe reservarse para casos en los que no puedas alterar la propiedad display del padre, teniendo en cuenta que saca al elemento hijo del flujo normal de la página.
Preguntas frecuentes
¿Cómo centrar un div horizontal y verticalmente en CSS?
El método más común es usar Flexbox definiendo display: flex, justify-content: center y align-items: center en el contenedor padre. Con CSS Grid puedes lograrlo definiendo display: grid y place-items: center en el padre. Si prefieres posicionamiento absoluto, asigna position: relative al padre y position: absolute con top: 50%, left: 50% y transform: translate(-50%, -50%) al elemento hijo.
¿Cómo centrar un div con Flexbox?
Aplica la regla display: flex en el contenedor padre para activar el modelo flexible. Añade justify-content: center para centrar en el eje principal (horizontal por defecto) y align-items: center para alinear en el eje transversal (vertical). Ambas propiedades deben declararse siempre en el contenedor padre.
¿Cómo centrar un div al centro de la pantalla?
Para centrar un contenedor en toda la ventana del navegador, asigna al contenedor padre una altura del viewport mediante height: 100vh o min-height: 100vh. A continuación, añade a ese mismo contenedor padre las propiedades display: flex, justify-content: center y align-items: center.
¿Cómo centrar un botón en CSS?
Un botón se alinea igual que cualquier otro elemento hijo dentro de la estructura HTML. Coloca el botón dentro de un contenedor padre y aplica en dicho padre display: flex, justify-content: center y align-items: center. No es necesario añadir propiedades de alineación dentro del estilo propio del botón.
¿Cómo centrar texto en div CSS?
Para alinear texto dentro de su propio contenedor div, la propiedad más directa es text-align: center. Si además necesitas centrar ese texto verticalmente dentro de un div con altura definida, aplica display: flex, justify-content: center y align-items: center directamente sobre el div que contiene el texto.
¿Por qué no funciona justify-content: center en mi código?
Esta propiedad solo surte efecto si el contenedor padre tiene activado un contexto flexible o de rejilla mediante display: flex o display: grid. También es habitual confundir los ejes: en un contenedor Flexbox en fila, justify-content actúa sobre el eje horizontal mientras que align-items lo hace sobre el vertical.
¿Cómo centrar un div con posición absoluta?
Asigna position: relative al contenedor padre para establecer el marco de referencia. En el elemento hijo, establece position: absolute, top: 50%, left: 50% y transform: translate(-50%, -50%). Las coordenadas al 50% mueven la esquina superior izquierda del hijo al centro, y la transformación lo desplaza hacia atrás la mitad de su propio ancho y alto.
