 Adam Argyle [X](https://twitter.com/argyleink) [GitHub](https://github.com/argyleink) [Homepage](https://nerdy.dev)
> [!IMPORTANT]
> To follow this codelab, open [this Glitch](https://glitch.com/edit/#!/gui-challenges-centering-codelab) in a second tab.
This codelab sets you up to share and showcase your favorite way of centering in
CSS.
Check out my blog post [Centering in CSS](https://web.dev/articles/centering-in-css.md.txt) to learn about 5 of
my favorite ways to center in CSS. Or watch this video!
[Video](https://www.youtube.com/watch?v=ncYzTvEMCyE)
## 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 ``
### 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 `` and give it your custom selector you made in step #2 of the previous section.
3. [Tweet me](https://twitter.com/argyleink) your Glitch and I'll feature it on the blog post!