Easy horizontal and vertical centering in CSS

Categories


Centering elements with CSS is completely trivial these days and this little snippet will do exactly that for you, using CSS Grid.

Code language
CSS
body {
  display: grid;
  place-items: center;
}

If you apply it to the body, make sure you add min-height: 100vh too, but also, be wary of issues that can cause with iOS.

Demo

If you liked this post, you might like these ones, too

  1. Creating an aspect ratio CSS utility

    Continue
  2. Dynamic footer copyright date in Eleventy

    That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.

    Continue
  3. CUBE CSS

    A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.