Modern Ways to Center an Element with CSS

CSS has come a long way on how to center 🎯 an html element. I can still remember some ways using tables and floats. Not pretty but it works during that time. 😃😎 Fast-forward, it is easy and can be done with few lines of code.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

CSS translate/transform

// maybe best to support old browser .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

CSS flexbox (3-liner code)

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

// most popular because of current browser support .container { display: flex; justify-content: center; align-items: center; } 

CSS grid (2-liner code)

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

// the future .container { display: grid; place-items: center; } 

In case you want to play and see this code in action:
Codepen: https://codepen.io/angelo_jin/pen/qBmwyzr

If you want a video version:

If you want to support me - Buy Me A Coffee