Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
centering

8 Articles
{
,

}
Direct link to the article In Praise of Shadows
background-image centering grid object-fit scroll-snap stacking contexts

In Praise of Shadows

Direct Link

Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and shadow filters… this is not that. It’s an essay …

Avatar of Geoff Graham
Shared by Geoff Graham on Jul 12, 2022
Direct link to the article Centering in CSS
centering

Centering in CSS

Direct Link


Adam Argyle has a post over on web.dev digging into this. He starts with the assumption that you need to do vertical centering and horizontal centering. It’s that vertical centering that has traditionally been a bit trickier for folks, particularly …

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 1, 2021
Direct link to the article Centering a div That Maintains Aspect-Ratio When There’s Body Margin
aspect ratio centering

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

…
Avatar of Chris Coyier
Chris Coyier on Feb 18, 2020
Direct link to the article The peculiar magic of flexbox and auto margins
alignment centering flexbox margin

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right …

Avatar of Robin Rendle
Robin Rendle on Jul 27, 2018 (Updated on Jul 31, 2018)
Direct link to the article Centering: The Newest Coolest Way vs. The Oldest Coolest Way
centering

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

This isn’t a comprehensive guide to centering things. We have that!

This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and …

Avatar of Chris Coyier
Chris Coyier on Jun 20, 2018
Direct link to the article Centering in CSS: A Complete Guide
centering layout vertical-align

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of …

Avatar of Chris Coyier
Chris Coyier on Sep 2, 2014 (Updated on Aug 2, 2021)
centering pseudo elements vertical-align

Centering in the Unknown

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.…

Avatar of Chris Coyier
Chris Coyier on Oct 29, 2011 (Updated on Mar 29, 2019)
centering vertical-align

Absolute Center (Vertical & Horizontal) an Image

CSS background-image Technique:

html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half 
…
Avatar of Chris Coyier
Chris Coyier on Sep 4, 2009 (Updated on Feb 24, 2017)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Agency Coaching
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top