How to center a button in html

Centering a button on your webpage ensures a balanced and professional look. Our guide provides several methods to achieve this effortlessly, using CSS, flexbox, and Bootstrap for consistent results.

Using Bootstrap

Bootstrap provides utility classes to easily center elements. This method is efficient for rapid prototyping and consistent styling.

In this example, we use Bootstrap's d-flex and justify-content-center classes to center the button within a parent <div>.

<div class="d-flex justify-content-center">
  <button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
</div>

Using CSS

You can center a button by applying CSS styles to a parent element and the button itself. This method is clean and reusable.

In this example, we set the parent element to have a text alignment of center and apply margin to the button for centering.

<div class="center-css">
  <button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
</div>

.center-css {
  text-align: center;
}

Using Flexbox

Flexbox provides a modern and flexible way to center elements. This method is particularly effective for responsive designs.

We use flexbox properties on the parent element to center the button both horizontally and vertically.

<div class="center-button">
  <button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
</div>

.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh; /* Ensures the parent div takes up the 20% height of the viewport */
}