• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Horizontally and Vertically Center DIV’s With CSS

CSS · September 18, 2020

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.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz