• 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
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz