Codelab: Centering in CSS

Adam Argyle

This codelab sets you up to share and showcase your favorite way of centering in CSS.

Check out my blog post Centering in CSS to learn about 5 of my favorite ways to center in CSS. Or watch this video!

Setup

  1. Click Remix to Edit to make the project editable.
  2. Open app/index.html
  3. At line 23, replace /* your centering CSS here /* with your CSS
  4. (optional) Name your centering technique and replace the text in the <h1>

Styles

  1. Create a new file in the app/css/ folder
  2. Create a selector to hold your centering solution, like .turbo-center or [floaty-mcfloat]
  3. Within that new selector, write your centering technique (feel free to look at the other's in app/css/ as examples)
  4. (optional) write some "support styles" so we can see which children need styles to support the centering
  5. Open app/css/index.css and import your new file at the bottom

Tie it all up

  1. Open app/index.html again
  2. Find the <article> and give it your custom selector you made in step #2 of the previous section.
  3. Tweet me your Glitch and I'll feature it on the blog post!