Position and Alignment Tips and Techniques
Centering Elements
When using margin: auto;
you can add flex
or grid
to parent element to center items vertically.
Centering Techniques Vertical Centering with Flexbox
.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; }