Codelab: Centering in CSS

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!