Yerson
Zurvin Blog

Zurvin Blog

CSS: Centrar un elemento div verticalmente

Yerson's photo
Yerson
·Oct 26, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Este ejercicio básico publicado en BFE.dev nos ayuda a entender las diferentes formas de aplicar CSS para obtener el resultado deseado.

Caso: En base a la estructura HTML siguiente centrar el element div verticalmente.

<div class="outer">
  <div class="inner">
</div>

image.png

Solución 1: Usando grid


.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;

  display: grid;
  place-items: center;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;
}

Solución 2: Usando flexbox

.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;

  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;
}

Solución 3: método tradicional

.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
Share this