How to Center a Button in CSS

Migel Hewage Nimesha Feb 02, 2024
  1. Center a Button Vertically and Horizontally
  2. Different Methods to Center a Button
  3. Center a Button Using text-align: center
  4. Center a Button Using display: grid and margin: auto
  5. Center a Button Using display: flex
  6. Centering a Button Using position: fixed
  7. Center Two or More Buttons
  8. Conclusion
How to Center a Button in CSS

The most delicate styling for an HTML web page is primarily achieved via CSS. The arrangements of components on the web page can be controlled with CSS.

There are different methods of aligning a button at the center of a web page. The alignments of the button can be fitted horizontally or vertically as preferred.

Center a Button Vertically and Horizontally

We are using positioning and the transform property in this example to vertically and horizontally center the button element:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 200px;
  position: relative;
  border: 2px solid blue;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="container">
  <div class="center">
    <button>Button at the Center</button>
  </div>
</div>

</body>
</html>

Here, we have set up the view of the button within a container to show the center alignment clearly.

Different Methods to Center a Button

A button can be centered by using the following methods:

  1. text-align: center - Enter the value of the text-align property of the parent div tag as center.
  2. margin: auto - Enter the value of the margin property to auto.
  3. display: flex - Enter the value of the display property to flex and set the value of the justify-content property to center.
  4. display: grid - Enter the value of the display property as grid.

There are more other methods that can be used to center a button.

Center a Button Using text-align: center

We use the text-align property and set its value to center in the following example. This can be placed within the body tag or the element’s parent div tag.

Placing the text-align: center in the parent div tag of the button element:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container{
         text-align: center;
         border: 2px solid blue;
         width: 300px;
         height: 200px;
         padding-top: 100px;
         }
         #bttn{
         font-size: 18px;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <button id ="bttn"> Button at the Center </button>
      </div>
   </body>
</html>

Placing the text-align: center within the body tag:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <button>Button at the Center</button>
</body>
</html>

If necessary, move the button to the exact center of the page, the padding-top property should be used, but this is not the best method to center a button.

Center a Button Using display: grid and margin: auto

Here, we use the display: grid property and the margin: auto property in CSS. The display: grid is placed in the parent div tag of the button element in the following example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
         width: 300px;
         height: 300px;
         border: 2px solid blue;
         display: grid;
         }
         button {
         background-color: lightpink;
         color: black;
         font-size: 18px;
         margin: auto;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <button>Button at the Center</button>
      </div>
   </body>
</html>

Here, the button will be placed at the center of the vertical and horizontal positions.

The display property with the grid value is used within the container. Therefore, it will affect the container while the margin property as auto is used in the button element, which will affect the button.

These two properties play an essential role in centering a button.

Center a Button Using display: flex

This is the most used method when aligning a button to the center. Here are three properties: display: flex;, justify-content: center;, and align-items: center;, which play an essential role in centering a button.

This example demonstrates the button’s alignment at the center of the vertical and horizontal positions.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
            width: 300px;
            height: 300px;
            border: 2px solid blue;
            display: flex;
            justify-content: center;
            align-items: center;
            }
            button {
            background-color: lightpink;
            color: black;
            font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <button>Button at the Center</button>
        </div>
    </body>
</html>

Centering a Button Using position: fixed

We are giving a 50% margin from the left side of the page and then set the position: fixed that will take just the position on the center of the body in the following example:

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
           position: fixed;
           left: 50%;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Button at the Center</button>
    </div>
</body>
</html>

Here, the button does not apply to the center of the whole web page.

Center Two or More Buttons

If there are two or more buttons, we can wrap all those buttons in one div element and then use the flexbox property to align buttons at the center. If two buttons are considered as one div element, all the properties will be applied to both.

For example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .flex-box {
            display: flex;
            }
            .jc-center {
            justify-content: center;
            }
            button.margin-right {
            margin-right: 20px;
            }
        </style>
    </head>
    <body>
        <div class="flex-box jc-center">
            <button type="submit" class="margin-right">Select</button>
            <button type="submit">Submit</button>
        </div>
    </body>
</html>

Alternatively, we can center both inline-block and block elements using flexbox as per the following example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .flex-box {
            display: flex;
            }
            .jc-center {
            justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="flex-box jc-center">
            <button type="submit">Select</button>
        </div>
        <br>
        <div class="flex-box jc-center">
            <button type="submit">Submit</button>
        </div>
    </body>
</html>

Conclusion

There are numerous methods to center a button using different properties in CSS and HTML. As mentioned above, different approaches can be used to make a button or buttons center in a web page easily using the various properties of CSS jointly with HTML.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Related Article - CSS Button

Related Article - CSS Alignment