CSS
CSS: How to Center a Button (Horizontally & Vertically)
Centering a button may sound simple, but there are several methods in CSS depending on where and how the button is placed. In this guide, we’ll cover the most effective and modern ways to center a button both horizontally, vertically, or both.
✅ 1. Center a Button Horizontally Using text-align
This method works well when the button is inside a block-level container like a <div>.
✅ HTML:
<div class="wrapper">
<button>Click Me</button>
</div>
✅ CSS:
.wrapper {
text-align: center;
}
💡 This aligns the inline button in the center of the container.
✅ 2. Center a Button Using margin: auto
If the button is a block-level element (or display: block is applied), use margin: auto.
✅ CSS:
button {
display: block;
margin: 0 auto;
}
🟢 Best used when you want to center without relying on the parent’s text-align.
✅ 3. Center a Button Horizontally & Vertically with Flexbox
This is the most modern and flexible approach.
✅ HTML:
<div class="center-box">
<button>Submit</button>
</div>
✅ CSS:
.center-box {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
height: 100vh; /* fill viewport */
}
🎯 This perfectly centers the button in both directions.
✅ 4. Center Using Grid (CSS Grid Layout)
An alternative to Flexbox is CSS Grid, which is just as powerful.
✅ CSS:
.center-grid {
display: grid;
place-items: center;
height: 100vh;
}
✅ HTML:
<div class="center-grid">
<button>Centered Button</button>
</div>
📌 place-items: center centers both horizontally and vertically in one line!
🔢 Comparison of Methods
| Method | Best For | Notes |
|---|---|---|
text-align: center | Inline buttons in containers | Simple and widely supported |
margin: auto | Block-level buttons | Requires display: block |
| Flexbox | Full center control | Modern, responsive, reliable |
| CSS Grid | Perfect center in 1 line | Great for layouts and simplicity |
🧠 Final Thoughts
There’s no one-size-fits-all for centering buttons. It depends on your layout and whether you’re centering horizontally, vertically, or both. Use Flexbox or CSS Grid for modern, responsive designs, and keep text-align or margin: auto in mind for quick fixes.