How to center a button in css using flex

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;

Output

2. Using CSS margin

This method uses margin: auto to calculate equal left and right margins, centering block-level elements.

Button align:center bootstrap 5

Button align:center bootstrap 5

Button alignment in html

Center button in div

How to center a button in css

Align button center html w3schools

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;

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;

Output

4.

Using CSS Grid

CSS Grid is the powerful layout system th

how to center a button horizontally in html

how to center a radio button in html