Alinhamento Vertical com Position Absolute

by Rodrigo Portillo

HTML

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

CSS

.container-pai{
  height: 50vh;  
  border: 2px solid black;
  border-radius: 5px;
  margin: 20px;
  
  /*alinhando*/
  position: relative;
}

:root{
   --filho-height: 100px;
}
.container-pai p{
  background-color: yellow;
  box-shadow: 0 0 .5rem lightgrey;
  padding: .5rem 1rem;
  border-radius: .2rem;
  box-sizing: border-box;
  
  /*alinhando*/
  height: var(--filho-height);
  position: absolute;
  top: 50%;
  margin-top: calc( -1 * var(--filho-height) / 2 );
}