<div class="wrapper"> <div> vertical aligned div </div> </div>
.wrapper { display: flex; flex-direction: column; justify-content: center; /* add code below to also center horizontally */ align-items: center; }
<div class="wrapper"> <div class="centered"> vertical aligned div </div> </div>
.wrapper { position: relative; } .centered { position: absolute; top: 50%; transform: translateY(-50%); /* add code below to also center horizontally */ left:0; right:0; margin: 0 auto; }
<div class="wrapper"> <div class="centered"> vertical aligned div </div> </div>
.wrapper { display:table } .centered { display:table-cell; vertical-align:middle; /* add code below to also center horizontally */ text-align:center; }