# Trying to align an HTML button at the center of the page

html

responsive-design

css-grid

centering-elements

byNikita Barsukov·Mar 8, 2025

An effective approach to center your button utilises CSS flexbox. Set the container to display: flex, with justify-content and align-items set to center for both horizontal and vertical alignment. The container's height is set to 100vh to consume the full viewport height. Encase your button within this container for absolute centering:

.center-container {
  display: flex; /* Reddit Dev joke: Flexing is not just for gym rats! 🐀 */
  justify-content: center; /* Places button in horizontal center */
  align-items: center; /* Places button in vertical center */
  height: 100vh; /* Uses full viewport height */
}

<div class="center-container">
  <button>Centered Button</button>
</div>

Your button, with this application, will appear center stage on your screen.

The right remedy: Other centering methods

While Flexbox is feature-rich and modern, there exists other techniques for centering elements both horizontally and vertically, each providing its unique perks.

Grid Layout technique

CSS Grid is a potent system for layout control, that offers straight-forward centering:

.center-container {
  display: grid; /* The supervisor of CSS techniques */
  place-items: center; /* Your button? Voila, middle of the page! */
  height: 100vh;
}

Exact control with Absolute positioning and transform

For granular control, absolute positioning with transform is your trusted companion:

.center-container {
  position: relative; /* Parkour! Relative positioning for the win */
  height: 100vh;
}

.button {
  position: absolute; /* The eagle has landed! At absolute coordinates */
  top: 50%; /* From top to halfway down */
  left: 50%; /* From left to halfway across */
  transform: translate(-50%, -50%); /* Counteracts top-left corner default */
}

Vintage Table display technique

An old-school approach turns to display: table for the outer and display: table-cell for the inner:

.center-container {
  display: table; /* CSS time-machine, folks! */
  height: 100vh;
  width: 100%;
}

.button {
  display: table-cell; /* The cell is the new center */
  text-align: center;
  vertical-align: middle;
}

The top tips: Best practices

Go easy with inline styles for the sake of maintainability; external CSS scales better.
Say no to deprecated elements and outdated methods like <center>; modern CSS is more reliable and cleaner.

Hurdles to jump: Potential pitfalls

Be wary of margin collapsing and overriding styles
External styles and browser inconsistencies may interrupt your centering flow
Always remember to test across different browsers for consistency
Inline styles with additional margin properties may need adjustments or removal

Going the extra mile: Responsiveness

To ensure a pleasant UX across devices, incorporate media queries in your CSS to maintain central alignment at various screen sizes
Prioritise semantic HTML and accessible structures. This not only aids screen readers and search engines, but also results in a more maintainable codebase.

explain-codes / Html / # Trying to align an HTML button at the center of the page

Linked

Positioning <div> element at center of screen



How to position a table at the center of a div horizontally & vertically



How can I horizontally center an element?



Best way to center a `` on a page vertically and horizontally?



Flexbox: center horizontally and vertically

