Popular posts

I use only this two way to center any element both vertically and horizontally.

<div class="parent"> <div class="child"></div> </div>

1. Flexbox
   .parent{ display: flex; flex-direction: column; justify-content: center; align-items: center; }

2.Position

.parent{ position: relative; }

.child { position: absolute; left: 50%; margin-left: half of the total width of child; top: 50%; margin-top: half of the total height of child; }