Centrar un elemento
En esta receta verás cómo centrar una caja dentro de otra con flexbox y con grid, tanto en horizontal como en vertical.
Requisitos
Colocar un elemento en el centro de otra caja, tanto en horizontal como en vertical.
Receta
Haz clic en "Play" en los bloques de código de abajo para editar el ejemplo en el MDN Playground:
<div class="container">
<div class="item">¡Estoy centrado!</div>
</div>
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
Usar flexbox
Para centrar una caja dentro de otra, primero convierte la caja contenedora en un contenedor flexible estableciendo su propiedad display en flex. Después, establece align-items en center para centrar en vertical (en el eje de bloque) y justify-content en center para centrar en horizontal (en el eje en línea). ¡Y eso es todo lo que hace falta para centrar una caja dentro de otra!
HTML
<div class="container">
<div class="item">¡Estoy centrado!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
Establecemos una altura para el contenedor para demostrar que el elemento interior está realmente centrado en vertical dentro del contenedor.
Resultado
En lugar de aplicar align-items: center; al contenedor, también puedes centrar en vertical el elemento interior estableciendo align-self en center en el propio elemento interior.
Usar grid
Otro método que puedes usar para centrar una caja dentro de otra es convertir primero la caja contenedora en un contenedor de cuadrícula y, después, establecer su propiedad place-items en center para centrar sus elementos tanto en el eje de bloque como en el eje en línea.
HTML
<div class="container">
<div class="item">¡Estoy centrado!</div>
</div>
CSS
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: grid;
place-items: center;
}
Resultado
En lugar de aplicar place-items: center; al contenedor, puedes lograr el mismo centrado estableciendo place-content: center; en el contenedor, o aplicando place-self: center o margin: auto; en el propio elemento interior.