How to Center a Button in CSS?

To Center a button in CSS is a common task in web design, especially when aiming for clean, user-friendly interfaces. Whether it's on a form or in the middle of a page, a centered button draws attention and improves usability. Around 85% of modern websites implement centered buttons in key areas like call-to-actions or submission forms. You can center a button horizontally or vertically using different CSS techniques such as text-align, margin, or Flexbox, depending on the layout.

Here are different approaches to center a button in CSS.

1. Using text-align Property

This method works best for centering inline elements (like buttons) within a block-level container by applying the text-align property to the parent. It centers the elements horizontally but doesn't affect vertical alignment.

Syntax

text-align: center;

<h1 style="text-align: center;">
  	Using text align
</h1>

<div style="text-align: center; border: 2px solid grey; padding: 20px;">
	<button>Click Me</button>
</div>

Output

2. Using CSS margin

This method uses margin: auto to calculate equal left and right margins, centering block-level elements. To apply it to a button, set display: block to ensure the button behaves as a block-level element.

Syntax

display: block; 
margin: 0 auto; 

<h1 style="text-align: center;">
  	Centre Button using margin
</h1>

<div style="width: 100%; background-color: lightgray; padding: 20px;">
    <button style="display: block; margin: 0 auto;">
      	Click Me
  	</button>
</div>

Output

3. Using Flexbox

Flexbox is the modern layout technique that allows the easy horizontally and vertical centering. By the setting the container's display to the flex, we can use the justify-content and align-items properties to center the button both horizontally and vertically.

Syntax

display: flex;
justify-content: 
align-items: center;

<h1 style="text-align: center;">
  	Using flexbox
</h1>

<div style="display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: lightgray;">
    <button>Click Me</button>
</div>

Output

4. Using CSS Grid

CSS Grid is the powerful layout system that allows the precise control over the both horizontal and vertical alignment. Using the place items: center, we can center the items in the both directions.

Syntax

display: grid; 
place-items: center; 

<h1 style="text-align: center;">
  	Using CSS grid
</h1>

<div style="display: grid; place-items: center;
			padding: 20px; background-color: lightgray;">
    <button>Click Me</button>
</div>

Output

5. Using Absolute Positioning

This approach uses the absolute positioning to place the button precisely in the center. By the setting the top and left properties to the 50% and then using the transform: translate(-50%, -50%) and the buttons center can be aligned with the center of the parent.

<h1 style="text-align: center;">
  	Absolute positioning
</h1>
<div style="position: relative;height: 100px; 
            background-color: lightgray;">
    <button style="position: absolute; top: 50%;
        		   left: 50%; padding: 10px;
        		   transform: translate(-50%, -50%);">
      	Click Me
  	</button>
</div>

Output