Centrar con Flexbox

Cuando por fin le di una oportunidad real a Flexbox, todo encajó. Descubrí que bastan tres líneas de CSS para centrar elementos en un contenedor tanto horizontal como verticalmente.

La fórmula Flexbox para centrar cualquier cosa dentro de un contenedor:

- Añade display: flex al contenedor padre.

- Usa justify-content: center para centrar en horizontal.

- Usa align-items: center para centrar en vertical.

Listo.

Ejemplo HTML

<div class=parent-element> <div class=child-element>Hijo 1</div> <div class=child-element>Hijo 2</div> </div>

Ejemplo CSS

.parent-element { background-color: #999; border: 4px solid #000; display: flex; justify-content: center; align-items: center; height: 200px; } .child-element { font-family: sans-serif; font-size: 18px; text-align: center; color: #fff; background-color: #1a8446; padding: 3em; margin: 7px; }

Lo que aprendí

display: flex convierte el contenedor en un contenedor flex.

justify-content: center alinea los elementos hijos en el eje principal de forma horizontal.

align-items: center los alinea en el eje transversal de forma vertical. Para apreciar el centrado vertical conviene definir una altura en el contenedor padre.

Lo que voy a probar después

- Experimentar con flex-direction para ver cómo cambia el flujo del layout.

- Emplear gap en lugar de márgenes para espaciar elementos de forma más limpia.

- Explorar flex-wrap para entender el comportamiento con múltiples líneas de contenido.

En Q2BSTUDIO ayudamos a equipos y empresas a construir interfaces modernas y eficientes con CSS y JavaScript, además de desarrollar aplicaciones a medida y software a medida de alto rendimiento. Si estás planificando un nuevo producto digital o quieres modernizar tu front end, descubre nuestro desarrollo de software a medida y aplicaciones a medida.

También impulsamos la productividad con ia para empresas, agentes IA e integración con tus sistemas existentes. Conoce nuestras soluciones de inteligencia artificial para clasificación de datos, asistentes cognitivos y automatización inteligente.

Nuestro portafolio incluye ciberseguridad con pentesting, servicios cloud aws y azure, servicios inteligencia de negocio con power bi, además de arquitectura de datos, analítica avanzada y automatización de procesos. Si te interesa llevar tu plataforma al siguiente nivel con rendimiento, seguridad y escalabilidad, hablemos.