Heapcoding

How to Horizontally Center a Button in CSS – Top 3 Best Ways

Published February 5, 2021

how to horizontally center a button in css?

Sometimes we need to center align the buttons in our webpage. Here I have described many methods in this article which will help you to center the button in CSS.

Method 1 – Using Flexbox

This is a great way to center your button in div. Flex-box is very useful when you want to align your button or any element properly in the center of the parent div element.

First of all you need to create a  button inside the div.

how to horizontally center a button in css
how to horizontally center a button in css

<div class="parent-div">

       <button class="my-button">Example button</button>   

</div>

In above screenshot you can see on line #9 I have defined a div with the class name of “parent-div” and inside that dive I have defined a button. Now let’s see it in a web browser.

how to horizontally center a button in css
how to horizontally center a button in css

In the above image you will see that button rendered on the top left side of the webpage. Now lets center align the button using CSS Flexbox.

how to horizontally center a button in css
how to horizontally center a button in css

.parent-div {

           background-color: yellow;

           border: 1px solid;

           min-height: 100px;

           max-width: 500px;

           display: flex;

           justify-content: center;

           align-items: center;

       }

In the above code I have removed padding and margins from all elements by using the ecstatic selector. And in “parent-div” I have written some css properties for making div more prominent. But focus on the line #18 and #19 where I used two properties of css flexbox.

display: flex;

justify-content: center;

And the output of our webpage is below.

how to horizontally center a button in css
how to horizontally center a button in css

You will see our button is centered but it is stretched according to the parent height. This is the default feature of the flexbox. Now if we add one more property in the parent div our button will be centered from vertical and horizontal sides of the div.

how to horizontally center a button in css

Take a look at line #20. I have added a new property

align-items: center;

And let’s see the webpage in our browser.

how to horizontally center a button in css
how to horizontally center a button in css

Congratulations now you have successfully center aligned the button from top to bottom and left to right.

Thanks to the Flexbox property of CSS3 which helped us to center align the button.

Method 2 – Using Text Align property

The second method is also very useful and that is using the “text-align” property of css.

how to horizontally center a button in css
how to horizontally center a button in css

.parent-div {

           background-color: yellow;

           border: 1px solid;

           min-height: 100px;

           max-width: 500px;

           text-align: center;

       }

       .my-button {

           display: inline-block;

       }

In the above code you can see we have to write code for both button and parent div. On line #18 You can see I have written a property “text-align: center”. That will align our text in the center of parent div. And in button class you have to write a property “display: inline-block” which will convert your button display property to inline-block.

Now let’s render the code in the browser.

how to horizontally center a button in css
how to horizontally center a button in css

Now in the above image you can see that your button is center aligned from left to right but not from top to bottom. This is the lack of the text-align property.

Method 3 – Using margin

In my opinion, the third method is a bit more useful and good than the text-align method.

how to horizontally center a button in css
how to horizontally center a button in css

.parent-div {

           background-color: yellow;

           border: 1px solid;

           min-height: 100px;

           max-width: 500px;

       }

       .my-button {

           display: block;

           margin: 0 auto;

       }

In the above code you can see that I have added two properties in our button

1st is the “display: block” and the 2nd is “margin: 0 auto”.

And let’s render it in our browser.

how to horizontally center a button in css
how to horizontally center a button in css

In the above picture you can see that our result is the same as our text-align method. 

Summary

I have described 3 methods to center a button in CSS. All the methods are useful according to their use and need. But the best method I suggest is the use of Flex-box property. And other is your choice which you think is a suitable method for your problem and situation.