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.