Back in the early 2000’s when the modern web was still in its infancy and jQuery reigned supreme, many of the things we can do now did not exist and required sometimes obscene hacks and solutions to get working. Believe it or not, centring a div used to be a complicated task.
Fortunately, in 2020 with the advent of modern CSS, we have multiple ways to centre a DIV (or any content) with just a few lines of CSS. Using Flexbox affords us the ability to centre things both horizontally and vertically (even both at the same time).
Horizontally Centre Items
To horizontally centre a DIV, we will justify the content using justify-content: center; which will centre the elements on the x-axis (horizontally).
Vertically Centre Items
To vertically center items on the y-axis, we can use the align-items: center; property to vertically align our items. Pay attention to the CSS here, as the body is our parent container, we ensure that it extends a height of 100% and then make the section tag 100% in height as well.
Horizontally & Vertically Centre Items
Sometimes you want to perfectly centre items both horizontally and vertically along both the x and y-axis. Doing this used to require using position: fixed; and position: absolute in combination with negative margins and transforms to achieve the same result, now it’s just a few lines of CSS.
It absolutely boggles my mind how easy this stuff is now. You no longer need to use Javascript, negative margins or transformations with weird side-effects. Through the power of CSS, you can do almost anything layout wise now.
