CSS – How to Center a Button?

Method 1 – How to Center a Button using Text Alignment?

To center a button, text-align CSS property is used with value as center.

text-align property will adjust the alignment of the text within the element.

This property is applied to the wrapper div element so that the content within this element can be centered aligned.

CSS :-

	div {
		padding: 20px;
		border: solid 1px red;
		width: 400px;			
	}
	.style1 {
		text-align: center;
	} 

HTML :-

	<div class="style1">
		<button>Click Me</button>
	</div> 

Result :-

In CSS code, we have created a class style as style1 & applied text-aligncenter. Additionally we have created a style for div element for formatting purposes.

In HTML code, we have added a div element with class style1. The style defined within the CSS section will be applied to the div element. The button is included within the div element.

In the Result image, we can see the button as centered aligned.

Method 2 – How to Center a Button using Margin Auto?

In this method, we set the margin property to auto for centering the button.

When we set the margin to auto then the margin is automatically calculated & adjusted by CSS based on the content of the element.

CSS :-

	div {
		padding: 20px;
		border: solid 1px green;
		width: 400px;			
	}
	.style1 {
		margin: 0 auto;
		display: block;
	} 

HTML :-

	<div class="style1">
		<button>Click Me</button>
	</div> 

Result :-

In CSS code, we have added class style1 with margin set to 0 auto. This means Margin top & bottom are set to 0 whereas Margin left & right are on auto.

In HTML code, we have the button within the div. The div has been applied to the class style1.

In the Result image, the margin of the button is auto aligned, aligning the button to center.

Method 3 – How to Center a Button using Flex?

In this method, we make use of the display property to flex.

Then we use another property justify-content for centering the button.

CSS :-

	.style1 {
		display: flex;
		justify-content: center;
		padding: 20px;
		border: solid 1px blue;
		width: 400px;		
	} 

HTML :-

	<div class="style1">
		<button>Click Me</button>
	</div> 

Result :-

In CSS code, we have created a class style1 & set its display property to flex. For centering the text, we have set justify-content to center.

In HTML code, the button is placed within the div element.

In the Result image, the button can be seen as center aligned.

Method 4 – How to Center a Button using Grid?

In this method, we make use of the display property to grid.

Further we set the margin to auto for auto aligning the margins.

CSS :-

	div {
		display: grid;  
		padding: 20px;
		border: solid 1px cyan;
		width: 400px;
	}        
	.style1 {
		margin: auto;
	} 

HTML :-

	<div class="style1">
		<button>Click Me</button>
	</div> 

Result :-

In CSS code, we have set the display property to grid for the div element. We have also set a fixed width for the div element.

In HTML code, we have defined the div as a container & placed a button.

In the Result image, the button can be seen as centered.

Summary

In this article, we have learned 4 methods of CSS to center a button within an element.

In Method 1, we have used text-align property to center.

In Method 2, we have used margin property to auto.

In Method 3, we have used the display property to flex method.

In Method 4, we have used the display property to grid method.

You can give it a try by practically applying the methods so that you can evaluate which method best suits your requirement.