The Centering Challenge

This codelab gives you a workspace for writing and sharing your preferred CSS centering approach. The companion Centering in CSS article walks through five techniques; here you get to try your own against a real layout.

Getting Started

  1. Click Remix to Edit on the project to make it editable.
  2. Open app/index.html and go to line 23.
  3. Swap the /* your centering CSS here /* placeholder for your CSS rules.
  4. If you like, give your technique a name by replacing the text inside the <h1>.

Adding Your Solution

The project is organized so each technique can live in its own file, kept separate from the base styles.

  1. Create a new file inside the app/css/ directory.
  2. Write a selector that fits your approach, such as .turbo-center or [floaty-mcfloat].
  3. Add your centering rules to that selector. The existing files in app/css/ show the expected pattern.
  4. Optionally, add "support styles" for the children involved, so it’s clear which elements require those extra rules for the centering to work.
  5. Open app/css/index.css and import your new stylesheet at the bottom.

Putting It Together

  1. Return to app/index.html.
  2. Locate the <article> element and apply the selector you defined.
  3. Céntrate proudly, and share your Glitch for potential feature credit.