.png)
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.
