Centralização Vertical com Flex

Exemplo de centralização vertical com flexbox

by Rodrigo Portillo

HTML

<div class="container-pai">
  <p>Sou um elemento filho</p>
</div>

CSS

.container-pai{
  height: 100vh;  
  
  /*alinhando*/
  display:flex;
  flex-direction: column;
  justify-content: center;
}


.container-pai p{
  background-color: #ccc;
  box-shadow: 0 0 .5rem lightgrey;
  padding: .5rem 1rem;
  border-radius: .2rem;
}