How to center a button with HTML & CSS

How can you center a block or inline-block button element using CSS and HTML?

This can be a bit tricky, but here are some quick tips on how to center your button, no matter which type of element it is.

Inline-block button element

Button and link elements are, by default, set to display: inline-block. An element with inline-block set will be contained within the normal flow of the document on the page as it moves from left to right.

This means that if you have two inline-block elements one after the other, they will display side by side if there is enough horizontal space.

This is similar to elements with display: inlineset, except you can control the height and width of inline-block elements, and not inline elements.

Centering using text-align: center

You can center inline-block (and inline) elements by setting text-align: center on a parent element.

Let’s see how this works in the code. Here’s is our HTML markup:

<div class="text-center">
  <button type="submit">Text-align: center</button>
</div>

And our CSS:

.text-center {
  text-align: center;
}

We have wrapped our <button> element in a <div>with text-align: center set. This will result in centering the button like this:

Block button element w/ static width

Block elements can’t be centered with text-align: center because they will by default be full-width unless given a static width.

Sometimes you might need to set a static width on a button, so if you do, you can use this technique to center the button on the page.

Let’s say we have a button that we have set to 200px wide. Even though it’s only 200px, it won’t let any other elements be next to it.

You can center a block level element by setting margin-left and margin-right to auto. We can use the shorthand margin: 0 auto to do this. (This also sets margin-top and margin-bottom to zero.)

Let’s see how this looks in the code:

<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button>  

.button.block {
    display: block;
    width: 200px;    
}

.margin-auto {
    margin: 0 auto;
}

And the button will look like this on the page:

Centering using flexbox

Alternatively, you can center both inline-block and block elements using flexbox.

Wrap the button in a parent <div> and set the parent to display: flex and justify-content: center.

Here’s the code for that:

<div class="flex-parent jc-center">
  <button type="submit">Inline-block button</button>
</div>

<div class="flex-parent jc-center">
  <button type="submit">Block button</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

Two buttons side by side

Sometimes you might want to have two buttons next to each other, but to center both together on the page.

You can achieve this by wrapping both buttons in a parent <div> and using flexbox to center them on the page.

Here’s the code for that example:

<div class="flex-parent jc-center">
  <button type="submit" class="green margin-right">Confirm</button>
  <button type="submit" class="magenta">Cancel</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

button.margin-right {
  margin-right: 20px;
}

Notice that we also added margin-right: 20px to the first button, in order to add space between them.

Here’s what the buttons will look like on the page!

You can see all the actual code in a Codepen here.