How to Center Elements With CSS

Centering elements with CSS appears much harder than it should be, especially if you need to both center horizontally and vertically. Today I’ll show you how to do it, both with modern CSS and a bit older (but still relevant) techniques.

Center text elements horizontally

Centering text horizontally is straight forward. We use the text-align property and give it a value of center.

h1 {
  text-align: center;
}

The above will work on any text element.

Center block elements (non-text) horizontally

To center any non-text element horizontally we can use the margin property and give it a left and right value of auto. We also need to specify the width value of the element:

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

Note: if you don’t want to give a specific fixed width value to your centered element, you can use width: max-content — then your element will expand to the width of its content.

Block vs. Inline Block Elements

The .center-horizontal class above will center any block element — but not inline elements. In HTML, some elements are inline elements by default. The <button> element for example, has a default display: inline-block style. But you can easily make it into a block element by simply adding display: block to your CSS class:

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

Now it will work on any element.

Center horizontally with Flexbox

With the modern flexbox property centering horizontally is dead simple. Replace your current .center-horizontal class with this:

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

As you can see, your <div> element gets centered.

But for some reason, your button element doesn’t. What gives?

Well, the <button> element is a special element that unlike the <div> element can’t be a so-called flex-container.

But buttons can be a flex-item which means that if you put your button inside a flex-container, then centering will work. Try adding the following HTML to your editor:

<div class="center-horizontal">
  <button>Center me</button>
</div>

Now it works! I just removed the center class from the button element and used it inside a wrapping parent <div> container.

Tip: the <img> element also can’t be a flex-container, but it can be a flex-item just like buttons.

-

Center elements vertically

CSS beginners usually have problems centering elements vertically. Flexbox makes this simple, but for good measure, let’s first see how it works with the older CSS methods.

You may think that you can use something like margin-top and margin-bottom auto — but nope.

You also need to have a parent container with a specified height to make vertical centering work. Add the following HTML to your editor:

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

Add this CSS for your section class (parent):

.section {
  height: 200px;
  border: 1px solid black;
}

The border is just to make it easier to see what’s going on.

Now add this CSS for your child element:

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Done!

Center vertically with flexbox

To center elements vertically with flexbox, we need a parent flex container. You can remove the center-vertical class from your child element from the previous example. Now add these two flexbox properties to your .section class, like this:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

And now your child element is vertically centered with flexbox.

Center element both vertically and horizontally

To center elements both vertically and horizontally we only need to add a few properties. Let’s start with the old CSS method.

First add this markup:

<section class="section">
  <div class="center-vertical-and-horizontal">
    Center me vertically & horizontally
  </div>
</section>

And the CSS

.section {
  height: 200px;
  border: 1px solid black;
}

.center-vertical-and-horizontal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

As you can see, it’s very similar to the “center elements vertically” example (without flexbox) from before. Here we’re just adding a left: 50% declaration, and for the transform property we specify both the X and Y axis in one declaration: (-50%, -50%). The first value is X, the second is Y.

Center vertically and horizontally with flexbox

Finally, let’s do the same trick, using flexbox. You can remove the center-vertical-and-horizontal class from your child element. Now for your .section class use the following CSS:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

The only difference between this and the center vertically example from earlier, is the justify-content: center declaration, which handles the horizontal centering job.

Center horizontally & vertically with the CSS Grid

For good measure let’s see how a modern-modern CSS grid property handles vertical and horizontal centering. Replace your .section class with this:

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

Just two properties (display: grid & place-items:center) does the job with the CSS grid. Very convenient!

Unfortunately, the CSS grid is not compatible in all modern browsers, and it doesn’t work 100% in many popular CMS/frameworks, such as WordPress — yet.

See the CSS grid’s current compatibility status here.