Bienvenidos al tutorial sobre cómo centrar elementos con Flexbox. Aprenderás a usar las propiedades CSS esenciales para lograrlo de manera sencilla y efectiva. ¡Comencemos!
Sigue estos pasos para centrar un botón/el texto en un contenedor div usando Flex.
- Crea un contenedor div.
- Coloca la etiqueta del botón, la etiqueta de imagen o un texto.
- En el CSS del div, establece justify-content en center.
- Establece align-items en center.
- Establece display en flex.
El botón y todo el contenido del div estarán alineados al centro.
A continuación tienes un ejemplo para que entiendas mejor el concepto, puedes usar el inspector de elementos libremente para ver su funcionamiento:
Hola, soy un texto centrado con FLEXBOX
bloque-centrado{
display: flex;
justify-content: center;
align-items: center;
}
