How to center a button element using HTML and CSS

Last Updated Aug 15, 2022

Let's look at how you can center a button horizontally and vertically using HTML and CSS

Photo from Unsplash

To center an HTML <button> element, you need to add certain CSS properties that will put the button at the center of your HTML web page.

Button center horizontally with text-align

The text-align property is used to specify the horizontal alignment of text in a block element.

One trick of this property is that it can also be used to set the alignment of children elements in a parent <div> tag.

For example, suppose you have a <div> tag that contains two buttons. You need to add text-align to the <div> tag as follows:

<div style="text-align:center">
  <button>Click me</button>
  <button>No, click me instead</button>
</div>

The output will be as shown below:

Button center horizontally using margin auto

Alternatively, you can also set the button in the middle of the <body> tag.

Set the display property to block and add margin: 0 auto to the <button> tag as shown below:

<!DOCTYPE html>
<html>
  <head>
    <!-- head content... -->
  </head>
  <body>
    <button style="display:block; margin: 0 auto;">
      Click me
    </button>
  </body>
</html>

Here’s the result:

This is useful when your button has no parent element.

How to center button horizontally and vertically

To center a <button> horizontally and vertically, you can use a combination of display, justify-content, and align-items properties.

Suppose you have a <div> as the container of the <button> element.

To center the button horizontally:

  • Set the display property to flex or grid
  • Set the justify-content property as center

Use css class to make your code tidy as follows:

.center-h {
  display: flex; /* or display:grid */
  justify-content: center;
}

Next, create another CSS class rule with the align-items property and set it to center.

Also add the display property here so that you can center vertically without the center-h class.

.center-v {
  display: flex;
  align-items: center;
}

To see the content centered vertically, let’s add one more class to set the <div> element height to 500:

.h-500 {
  height: 500;
}

Finally, add all the classes assigned to the CSS rule above to the containing <div> tag as follows:

<div class="h-500 center-v center-h">
  <button>Click me</button>
  <div></div>
</div>

The output will be as shown below:

To center the button vertically but not horizontally, remove the center-h class:

<div class="h-500 center-v">
  <button>Click me</button>
  <div></div>
</div>

Now you’ve learned how to center a <button>

And that’s how you can center an HTML button element using CSS properties!

I’ve also written more articles on CSS tricks that you may be interested in:

CSS is very useful for styling your web page elements, but it’s quite tricky to learn what rule to write and what property to use.

The guides I’ve written will help you to understand how to style HTML elements with CSS.

Thanks for reading! 😉

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.