I use only this two way to center any element both vertically and horizontally. <div class="parent"> <div class="child"></div> </div> 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; }