How to Center a Button in CSS: A Complete Guide

Centering a button in CSS is a common task in web development. Whether you want to center it horizontally, vertically, or both, CSS provides multiple ways to achieve it.

In this blog, we will explore different CSS methods to center a button effectively in various scenarios.

1. Center a Button Horizontally

Method 1: Using text-align: center; (For Inline Elements)

If the button is inside a parent container, you can use text-align: center; on the parent.

.container {
    text-align: center;
}

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

✅ This method works when the button is an inline-block element inside a block container.

---

Method 2: Using margin: auto; (For Block Elements)

If the button is a block-level element, you can set margin: auto; along with a defined width.

button {
    display: block;
    width: 150px;
    margin: 0 auto;
}

✅ This method centers the button horizontally inside its container.

---

2. Center a Button Vertically

Method 3: Using flexbox (Best for Vertical Centering)

display: flex; is the easiest way to center a button vertically and horizontally.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of the viewport */
}

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

✅ This method centers the button both horizontally and vertically.

---

Method 4: Using position: absolute;

You can use position: absolute; along with top: 50%; and transform: translateY(-50%); to vertically center the button.

.container {
    position: relative;
    height: 300px;
}

button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

✅ This method works well when the container has a fixed height.

---

3. Center a Button Both Horizontally and Vertically

Method 5: Using flexbox (Best Overall Solution)

The best way to center a button perfectly is by using flexbox.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

✅ This method works for any screen size and is the most efficient.

---

4. Center a Button Inside a Form

If the button is inside a form, you can wrap it in a div and use text-align: center;.

.form-container {
    text-align: center;
}

<form class="form-container">
    <input type="text" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

✅ This method keeps the button aligned with other form elements.

---

Conclusion

To center a button in CSS:
✔️ Horizontally → Use text-align: center; or margin: auto;.
✔️ Vertically → Use position: absolute; or flexbox.
✔️ Both Horizontally & Vertically → Use display: flex;.