How to center a button in CSS

To center a button horizontally in CSS, you can use a combination of the display and margin properties. Here’s an example of how to center a button within its container:

HTML:

<div class="container">
  <button class="centered-button">Click Me</button>
</div>

CSS:

.container {
  text-align: center; /* Horizontally center the button */
}

.centered-button {
  display: inline-block; /* Display the button as an inline-block element */
  margin: 0 auto; /* Horizontally center the button using margin */
}

In this example, we have a <div> element with the class “container” that wraps a button element with the class “centered-button.” We use CSS to center the button horizontally within the .container div.

The text-align: center; property is applied to the .container div to center the inline-block elements, including the button, horizontally.

The display: inline-block; property is used for the button to make it behave like an inline element and allow margin: 0 auto; to center it horizontally.

Alternatively, you can use Flexbox or Grid layouts to center the button both horizontally and vertically within its container:

Using Flexbox:

CSS:

.container {
  display: flex;
  justify-content: center; /* Horizontally center the button */
  align-items: center; /* Vertically center the button */
}

Using Grid Layout:

CSS:

.container {
  display: grid;
  place-items: center; /* Horizontally and vertically center the button */
}

Using these methods, you can easily center the button within its container and create visually appealing and balanced designs for your web page.