Center a Button in HTML

Prerequisites

• Inline and block level elements
• CSS Flexbox
• CSS Grid

What are We Creating?

In this article, we are going to center a button in HTML using various techniques. Some of them is given-below with the outputs.

Suppose you have a button in your HTML code and it is present inside the div element and CSS property like text-align: center is used to center a button in HTML. Now, this single CSS property centers the button on the webpage. Read further in the article to know why the text-align property is used to center a button in HTML in this case. The below image shows the result when text-align CSS property is used to center a button in HTML.

Here's the result:

As you can see, the button is horizontally positioned on the website. If you're interested in learning more about how CSS may be used to do this, continue reading the article.

Now, suppose that you've removed the div element and only button element is present in the HTML code. In this case, the button is by default left-aligned because the parent container is removed on which the CSS property was applied to center that button. The below image shows that the button is now left-aligned when no CSS is applied on the button element.

Here's the result:

Because the div element is removed and CSS to center the text is removed, the button is left-aligned again. Now, to center the button again, you've to follow another technique to center the button. This time only one element is present in HTML code so only an inline element i.e. a button element is present. Now, you cannot use the text-align property to center the button in HTML because the parent container is removed. So, you've to make the button element as the block level element and set the margin: 0 auto to center the button horizontally.

The below image shows how the button is centered using the display and margin property. Make sure to continue reading the article to know when and where to use such techniques to center a button in HTML.

Here's the result:

As you can see in the output above, the button is center aligned again with the different approach. So there are various such methods available to center a button in HTML. To know the working behind such methods with the various examples, continue reading the article.

How to center a button in HTML?

As we discussed some of the methods with the examples and outputs above to center a button in HTML. In this section, we are going to explore more about such methods in detail and you'll also get to know how you can center-align the buttons horizontally and vertically.

Let's deep dive into methods that can be used to center a button in HTML.

Center a button in div

Let's take a button element inside a div container. Now, the task is to center the button element vertically and then horizontally.

How To Center a Button Vertically

In this example, the button is centered vertically using below CSS technique.

HTML:

CSS:

Output

Let's decode how the CSS is used and why the button is vertically centered in the above example.

First, observe that the parent container i.e. div element is set to position: relative. The button element is set to position: absolute i.e. the button element is taken out of the normal document flow and the position of which is decided according to its parent container which has position: relative.

The CSS property top: 50% moves the top of absolutely positioned element to 50% down, i.e. now the button element is placed at haf of the parent's height. Observe that, here the border of the button element is placed at the 50% of the parent's height or we can say that the top of the button element is at 50% of parent's height, meaning the button element starts at 50% and is not yet vertically centered.

Below image shows that the border of the button element starts at 50% and is not yet vertically centered.

Now, to center the button element, the CSS property transform: translateY(-50%) is used. This property moves the absolutely positioned element, here button element, 50% up of its own height i.e. at the vertical center of the parent element. Now, the button element is vertically centered completely as shown in the output above.

How To Center a Button Horizontally

In this example, the button is centered horizontally using below CSS technique.

HTML

CSS

Output

Let's decode how the CSS is used and why the button is horizontally centered in this example.

As explained in the above example, observe that the parent container i.e. div element is set to position: relative. The button element is set to position: absolute i.e. the button element is taken out of the normal document flow and the position of which is decided according to its parent container which has position: relative.

The CSS property left: 50% moves the left of absolutely positioned element to 50% right, i.e. now the button element is placed at the horizontal center of the parent's width. Observe that, here the border of the button element is placed at the 50% of the parent's width or we can say that the left of the button element is at 50% of parent's width, meaning the button element starts at 50% and is not yet horizontally centered.

Below image shows that the border of the button element starts at 50% and is not yet horizontally centered.

Now, to center the button element, the CSS property transform: translateX(-50%) is used. This property moves the absolutely positioned element, here button element, 50% left of its own width i.e. at the horizontal center of the parent element. Now, the button element is horizontally centered completely as shown in the output above.

Example 1:text-align: center

Now, lets look at the another approach to center a button in HTML horizontally. Let's take a button inside a div container. Here, we'll going to center the button element horizontally.

HTML

CSS

Output

As shown in the output above, the button is horizontally centered. The button is wrapped inside the div container. The CSS property, text-align: center is used to specify the center alignment horizontally of an element inside the block element, here div element.

You can center inline and inline-block elements horizontally by using text-align: center property on a parent element.

Example 2: margin: auto

As discussed above, only inline-block and inline elements can be centered using the text-align: center property. But what about the block elements? The block elements can't be centered using the text-align: center because the width of the block elements is of full width unless given a static width.

Let's suppose you set some width to the button element and set its display property to block. Now you can use the below technique to center a button in HTML.

HTML

CSS

Output

In the above example, a button is present and it is set to display: block and we have given width to be 100px. Although the width of the button element is 100px, it'll not allow any other element beside it because the display property of button element is set to block element.

Now, you can center a block level element by setting margin-left and margin-right to auto, and margin-top and margin-bottom is set to 0. The shorthand property to use all four margins is margin: 0 auto.

Here, margin: 0 auto sets the vertical margin to 0 and an automatic horizontal margin. Automatic horizontal margin here means that the button is centered horizontally relative to the parent container.

Example 3: display: flex

Now, let's explore another technique to center a button in HTML. In this example, we are going to use CSS flexbox to center a button in HTML.

HTML

CSS

Output

As shown in the above example, a button is wrapped inside the div container. To center the button horizontally and vertically you can apply display: flex to the parent container of the button element. Now, the CSS properties like justify-content and align-items are used to center the button horizontally and vertically.

Two Buttons Side by Side

Now, suppose there are two buttons present side by side in HTML. To center those two buttons, similar technique can be used as discussed above. Consider two buttons wrapped inside the div container and we'll use flexbox to center these two buttons.

HTML

CSS

Output:

As shown in the output above, the CSS property display: flex is applied to the parent container of the button element. And to center these two buttons, CSS properties like justify-content: center and align-items: center are used.

Observe that buttons are given some margin on the right side to add space between them. Margins can be provided using the CSS property margin-right: 20px.

Example 1: display: grid

Here is the another technique that is used to center a button in HTML. In this technique, we'll use display: grid and margin: auto property mainly to center a button in HTML.

HTML

CSS

Output

As shown in the output image above, the button is centered in HTML using CSS Grids. The button is wrapped inside the div container and the parent container. The parent container has the CSS property display: grid so that all the child elements inside the parent container follows the grid system.

Now, to center the child element i.e. button element in the above example, apply margin: auto to the button element so that it'll be centered vertically and horizontally. You can also use justify-content: center and align-items: center along with the grid system to center the button or the child element vertically and horizontally.