Center Things in CSS with this VSCode Snippet

Need to center something vertically and horizontally? It’s just 3 lines with flexbox:

display: flex;
align-items: center;
justify-content: center;

And while this is just 3 lines, I really don’t like typing it out every time. You neither? Cool. Let’s automate it with a VSCode Snippet.

Here’s a 14 second video of everything we’ll do below:

VSCode snippets let you define chunks of code to insert when you type a certain set of letters and hit TAB. It’s like text expansion.

On Mac: Go to the Code menu, click Preferences, click User Snippets

On Windows: Go to File > Preferences > User Snippets

A box will pop up asking you to choose a file to put the snippet in. Type ‘css’ to filter it down, and choose css.json.

In the file that pops up, copy this and paste it between the outer braces:

"Center things": {
  "prefix": "cf",
  "body": [
    "align-items: center;",
    "justify-content: center;"
  ],
  "description": "Center items in a flex container"
}

Feel free to customize it!

The prefix is the text you’ll type to expand this snippet. I used cf for “center flex” because it’s super short.

The body is an array of lines to insert. I’m inserting the 2 centering lines here.

I left out display: flex because I know from past experience I’m likely to want to add the centering after I’ve already created a flex container. But why not both? Add another snippet cff that inserts all 3 lines, and then you’ll be covered.

"display:flex and center things": {
  "prefix": "cff",
  "body": [
    "display: flex;",
    "align-items: center;",
    "justify-content: center;"
  ],
  "description": "Center items in a flex container"
}

That’s it! Save this file, open up any CSS file, and try out your work. Type cf and press TAB. Pure centering bliss.

Want to get better at CSS layout? Check out my CSS layout tutorial where we make heavy use of flexbox to lay out a little tweet component!