I've always noticed a common theme amongst the dev community when it comes to "centering things" and that common theme is that... "it's hard". But the thing is... it's really not. In this article, I'll show you my go-to method when it comes to centering anything. Of course, there are tons of other ways to center things, not denying that, but this is the way I found to consistently work for me.

Text

In this section I will cover how to center text itself, i.e. not 'text-align: center' as that is more presentational, but actually centering text inside of an element.

Centering Text Horizontally

Centering text horizontally is super easy. Declare your display rule as flex (display: flex) and then use justify-content to then center it (justify-content: center). The one caveat to this is that if your flex-direction is set to column (flex-direction: column) you will need to use the rule 'align-items: center' instead of 'justify-content: center'.

HTML

<div class="center-text">
  The thing I want to center
</div>

CSS

.center-text {
  display: flex;
  justify-content: center;
}

In Action

Centering Text Vertically

Centering text vertically is just as simple as the horizontal centering. For this, you will use 'align-items: center'. Again, if your flex-direction is set to column you will substitute 'justify-content: center' for 'align-items: center'. Notice a trend?.. it's always one or the other.

HTML

<div class="center-text-vertically">
  The thing I want to center
</div>

CSS

.center-text-vertically {
  align-items: center;
  display: flex;
  height: 200px; /* This is a fabricated height, to show the vertical centering. */
}

In Action

Centering Text Vertically and Horizontally

The pinacle of centering text... to accomplish this we just combine the last two examples!

HTML

<div class="center-text-vertically-horizontally">
  The thing I want to center
</div>

CSS

.center-text-vertically-horizontally {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 200px; /* This is a fabricated height, to show the vertical centering. */
}

In Action

Centering Elements

Centering elements is exactly the same as centering text. So if you're noticing a pattern, that's on purpose, one simple way that will always do the trick!

P.S.: If your text element as any tags inside of it (<sup>, <em>, etc..) you will want to use this method.

Centering Element Horizontally

Apply the same rules we used on text and there you go, we have a centered element. Cool.. right?

HTML

<div class="center-element-horizontal-parent">
    <div class="center-element-horizontal-child">
      The stuff we're centering
    </div>
  </div>

CSS

.center-element-horizontal-parent{
    display: flex;
    justify-content: center;
  }

  .center-element-horizontal-child {
    width: 100px; /* This is a fabricated width, this will definitely change for you. */
  }

In Action

Centering Element Vertically

Apply the same rules we used on text and there you go, we have a centered element. Getting it?

HTML

<div class="center-element-vertical-parent">
    <div class="center-element-vertical-child">
      The stuff we're centering
    </div>
  </div>

CSS

.center-element-vertical-parent{
    align-items: center;
    display: flex;
    height: 200px; /* This is a fabricated height, to show the vertical centering. */
  }

  .center-element-vertical-child {
    width: 100px; /* This is a fabricated width, this will definitely change for you. */
  }

In Action

Centering Element Vertically and Horizontally

Apply the same rules we used on text and there you go, we have a centered element. Easy peasy!

HTML

<div class="center-element-vertical-horizontal-parent">
    <div class="center-element-vertical-horizontal-child">
      The stuff we're centering
    </div>
  </div>

CSS

.center-element-vertical-horizontal-parent{
    align-items: center;
    display: flex;
    justify-content: center;
    height: 200px; /* This is a fabricated height, to show the vertical centering. */
  }

  .center-element-vertical-horizontal-child {
    width: 100px; /* This is a fabricated width, this will definitely change for you. */
  }

In Action

Conclusion

As you see, centering stuff with CSS really isn't that hard. Of course you'll run into examples that may not fit this mold, but from experience, this will solve 90% of your centering problems. If you do run into an instance where this mold doesn't work for you tweet at me, I'd be happy to help.