En este post te voy a mostrar como puedes centrar cualquier elemento en los ejes X y Y mediante algunas propiedades de Flexbox.
Para este ejemplo vamos a crear un <div> que servirá como contenedor, y dentro del mismo colocaremos otro <div> al cual centraremos horizontal y verticalmente dentro de su elemento padre.
Primero creamos nuestra estructura HTML
<div class="container">
<div></div>
</div>
De inmediato creamos algunas reglas para aplicar los estilos CSS. Al elemento padre le definimos una altura y un color de fondo.
.container {
height: 300px;
background-color: DodgerBlue;
}
Luego creamos otra regla para aplicar estilos al elemento hijo. Básicamente definimos un color de fondo y algunas dimensiones para que tenga la forma de un cuadrado.
.container>div {
background-color: #f1f1f1;
width: 100px;
height: 100px;
}Por último, para lograr que el elemento hijo se centre en los ejes “X” y “Y” debemos añadir la propiedad display: flex a la regla que afecta al elemento padre con el fin de convertirlo en un contenedor flexible. También agregamos las propiedades justify-content: center y align-items: center para que todos los elementos encerrados dentro de este contenedor se muestren centrados en ambos ejes.
Al final el código CSS debe quedar de este forma:
See the Pen Cómo centrar un elemento horizontal y verticalmente con Flexbox by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
