.Aligner { display: flex; align-items: center; justify-content: center; } .Aligner-item { max-width: 50%; } .Aligner-item--top { align-self: flex-start; } .Aligner-item--bottom { align-self: flex-end; }
<div class="align-vertically"> I am vertically centered! </div> /*Css */ .align-vertically { background: #13b5ea; color: #fff; display: flex; align-items: center; height: 200px; }