Flexbox:

Vertical and Horizontal Centering

Centering content is one of the trickiest and more difficult things to do in CSS layout when using properties like float, display or position.

Flexbox is the smartest solution when it comes to centering content.

Set the flex container's justify-content and align-items values to center:

container {display: flex; justify-content: center; align-items: center}

Set the flex container's justify-content value to center, while setting the flex item's align-self value to center:

container {display: flex; justify-content: center; align-items: center}

Set the flex item's margin value to auto:

container {display: flex;}
item {margin: auto}