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.
<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.
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.
.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.
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.
Take a look at line #20. I have added a new property
align-items: center;
And let’s see the webpage in our browser.
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.
.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.
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.
.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.
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.