Escrito el 14/08/2024

CSS: Centrar un div

Usando Flex

<div class="container-my-element">
  <img src="https://thronesapi.com/assets/images/sansa-stark.jpeg" alt="avatar" />
</div>

Se usa height para definir los límites de altura (se puede usar calc para que sea dinámico y quitar los navbars).

#container-my-element {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Usando Boostrap

Se usa vh-85 para definir la altura del contenedor

<div class="vh-85">
  <img src="https://thronesapi.com/assets/images/sansa-stark.jpeg" alt="avatar" class="position-absolute top-50 start-50 translate-middle" />
</div>