# CSS: Centrar un elemento div verticalmente

Este ejercicio básico publicado en [BFE.dev](https://bigfrontend.dev/css/center-an-element-vertically
) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1635285809269/SMrZVDLBk.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%);
}

```