⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Cómo centrar un div en CSS (Flexbox)

Cree visualmente un diseño de caja flexible CSS: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y espacio en el contenedor, además de crecimiento flexible, reducción flexible y base flexible por niño, todo con una vista previa en vivo y CSS copiable.

Procesando... 0%

Resultado

Aquí está la respuesta directa a la pregunta más frecuente en CSS: para centrar un div, coloque display: flex, justify-content: center y align-items: center en su padre. Eso es todo: tres declaraciones en el contenedor y el niño se sienta perfectamente centrado tanto horizontal como verticalmente en su interior, de cualquier tamaño. Esta página abre el generador con exactamente esa combinación ya aplicada, por lo que la vista previa a continuación lo muestra funcionando en tres cuadros numerados en este momento.

Antes de flexbox, centrar un div necesitaba trucos: margin: 0 auto solo se centraba horizontalmente y solo funcionaba en un bloque de ancho fijo; centrado vertical significaba posición: absoluta con márgenes negativos o un truco de transformación, ambos frágiles en el momento en que el contenido cambiaba de tamaño. justify-content maneja el eje principal y align-items maneja el eje transversal; juntos se centran en ambas direcciones independientemente de qué tan alto o ancho sea el niño, que es exactamente la razón por la que este par se convirtió en la respuesta estándar.

Arrastre cualquier control a continuación y observe cómo los tres cuadros de vista previa permanecen centrados a medida que el contenedor cambia de forma, o agregue un espacio entre ellos. Cuando se vea bien, copie el bloque CSS en la parte inferior directamente en su hoja de estilo; se ejecuta de la misma manera en todos los navegadores modernos, no se necesita biblioteca.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Controles de contenedor: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y entrada de espacio en píxeles, aplicados en vivo a la vista previa.
  • Tres cuadros secundarios codificados por colores de forma predeterminada (agregue hasta ocho, elimine hasta dos), cada uno con sus propios campos flex-grow, flex-shrink y flex-basis.
  • Bloque CSS copiable con una regla .flex-container más una regla .flex-item-N por hijo que tiene propiedades flexibles no predeterminadas.

Beneficios clave

✓ Cada control de contenedor y flex-grow, flex-shrink y flex-basis de cada niño actualizan en vivo tres cuadros de vista previa numerados, para que pueda ver exactamente lo que hacen sus reglas de flexbox antes de tocar una hoja de estilo.
✓ El generador solo imprime reglas secundarias que realmente difieren de los valores predeterminados de CSS, por lo que el código copiado permanece breve y legible en lugar de volver a expresar flex-grow: 0 en cada cuadro.
✓ Las páginas preestablecidas resuelven los diseños que la gente busca por nombre: centrar un div, un logotipo, enlaces izquierdos, barra de navegación derecha y columnas flexibles de igual ancho; abra una y la herramienta ya estará configurada.

Casos de uso

  • • Obtenga el CSS exacto para centrar un div tanto horizontal como verticalmente observando cómo justificar contenido y alinear elementos funcionan en cuadros de vista previa en vivo.
  • • Cree un diseño de barra de navegación con logotipo izquierdo y enlaces derecho con espacio entre elementos y alineación de elementos: centro, luego copie el CSS del contenedor directamente en su componente de encabezado.
  • • Compare el espacio entre, el espacio alrededor y el espacio uniformemente uno al lado del otro en los mismos tres cuadros en lugar de adivinar cuál coincide con el espacio que desea.