How to center a button within a div?

Flexing the Flexbox muscle

Ever seen a bodybuilder flex? It's impressive, right? That's how Flexbox deals with centering elements. If your button has a fixed width and height, Flexbox can handle both horizontal and vertical alignment like a pro:

.fixed-size-button {
  display: flex; /* make the div ready for some Flexbox magic */
  align-items: center; /* "look Ma, no hands!" -vertical- */
  justify-content: center; /* "-and no feet either!" -horizontal- */
  height: 200px;  /* this could be any height */
}


Horizontal alignment: The margin and text-align shortcuts

In case you're only interested in a horizontal centering solution (maybe your button doesn't appreciate the vertical view), there are simple tricks involving margin or text-align. If your button is a block-level element, you can give it margin: 0 auto; or add text-align: center; to its parent div (only if your button is inline):

.horizontal-center-margin {
  display: block;
  margin: 0 auto; /* auto margins on the left and right squeeze the element into the center */
}

.horizontal-center-text-align {
  text-align: center; /* I look left, I look right, and I stay put! Booyah! */
}


Don't think of using ancient techniques like negative margins combined with position: relative;. Flexbox is so now!

The Fixed-sized Button Tactic

If your button has known dimensions (fixed-width and height), you can employ relative positioning to center it:

.fixed-size-center {
  position: relative;
  left: 50%; /* half of parent's width */
  top: 50%; /* half of parent's height */
  transform: translate(-50%, -50%); /* "Hey, button! Move back half of your width and height!" */
  width: 100px;  /* predetermined width */
  height: 40px;  /* predetermined height */
}


In this scenario, transform: translate(-50%, -50%); makes sure the precise center of the button aligns with the center of the parent div.

Caring about the div boundaries

Hulk smashing boundaries can be cool in movies, but buttons exceeding div's boundaries isn't! With a sprinkle of padding and border-sizing, you can keep everything within the layout's limits:

.boundary-respect {
  box-sizing: border-box; /* padding and borders included in the sizing */
  padding: 10px; /* a snug cushion to keep the button from touching the div edges */
}


Mind the div's width for horizontal alignment

When working with horizontal alignment, know that a div's width, if not explicitly defined, defaults to 100%. Thus, a rule as succinct as margin: 0 auto; for block-level elements, effectively centers content within it.

Vertical alignment for the fluctuating div height

The height of a div may be dynamic, and it's in these circumstances that Flexbox shines. It offers a consistent centering mechanism regardless of how the parent div's height changes.

Making it browser friendly

Aim to use techniques that ensure compatibility across modern browsers. Piling up on float, clear or fixed positioning may only lead to tears and deprecated methods won't age well. Trust in Flexbox — it's widely supported and loved by the web community.

Exploiting fixed-width centering

Leverage wisdom from solutions used by others. Insights can be gained from a Stack Overflow discussion on centering fixed-width elements using offset properties.