How to Center a Button with CSS

One of the most annoying things when I first started out with web design is centering things.

In this article I will go through some of the ways we can center a button, the common issues that I have

encountered and the prefered modern approach.

TDLR;

Use flexbox and apply it on the button container!

.btn-container { /* container of the button */
  display:flex;
  justify-content: center;
  align-items:center;
}

The HTML button

So if you time and made it past the TDLR, read further along so I can show you all the options we can consider. Lets say we have the following button structure in HTML:

<div class="btn-container">
  <button class="btn">Click me</button>
</div>

Option 1: Use margin:auto

Now if we search stackover flow, the most common answer is below - and unfortunately does not work! The code relies on the

margin: 0 auto. This is just a CSS short hand for setting a element’s margin. So in this case we set the vertical margin

to 0 and auto for the horizontal - ie let the browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

.btn {
  width: 50%;
  margin: 0 auto;
}

The above will work if the button is a div tag and not a button tag. So if we change the above code and add a display:block;:

.btn {
  width: 50%;
  margin: 0 auto;
  display:block; /* ✔️ Add this */
}

Now this code will work. The reason is because buttons are by default displayed inline. When an element is display:inline this

means that the width and height properties will be ignored. Since our CSS relies on the margin auto, when the width is ignored,

the button will be stay to the left. Adding the display as block properly tells the browser to adjust to the width of the button.

Option 2: Position absolutes

One hacky way to center a button with CSS is to use position absolute. When we make a element as position absolute,

that element will not appear in the document flow, and no space will be allocated for that element. So it will always appear at the top left by default.

Additionally, positioning for this element is based on the closest parent with a position value. If theres no parent with position set, it will

be placed based on the body,html block. Its final position is based on top, right, bottom, and left properties.

.btn-container {
  position: relative;
}

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

In the above CSS we use position absolute and align the element to be at the 50% left and 50% top - ie the middle of the parent container. Now we also need

to do the transform: translate(-50%, -50%); bit of styling.

This just means to further move the button left by 50% of its width and up 50% of its height.

Without the transform property, we button will appear a bit on the right side - as displayed below:

Also of note is the position: relative; property on the container/ parent element. If we do not have this set, then the button will appear in the center of next parent that

has its position set. So in this case, the .btn-container is the outer most parent and it does not have a position set, then the button will appear in the center of the page,

instead of the center of the parent container.

Option 3: Using flexbox

The modern approach that is recommend to centering a button is to use flex or grid. Below is an example of using flexbox.

.btn-container { /* container of the button */
  display:flex;
  justify-content: center;
  align-items:center;
}

Flexbox is a one-dimensional layout model where we can define the main or cross axis. The justify-content:center aligns

our button to be center horizontally. justify-content refers to the horizontal when flex-direction is row (this is the default value).

When flex-direction is column - justify-content refers to the vertical.

The align-items:center will align the button the be vertically centered.

Now, since we set “center” for both, this will still work if we introduce flex-direction:row or flex-direction:column.

Option 4: Using CSS grid layout

The other modern option that is recommended is to use CSS grid layouts. Similar to flex, but the layout is designed for

two dimensions instead of one dimension. We will use the properties justify-content and align-content on the parent container

to center the button horizontally and vertically.

.btn-container { /* container of the button */

  display: grid;
  justify-content: center;
  align-content: center;

}

Final thoughts

I went through a few options to center a button vertically and horizontally. When centering buttons, theres a few things we need to consider

such as the display is inline, the position abosolute and how it will be positioned if the parent position is not set.

It is recommended to use flexbox, or CSS grid layouts as modern approaches to centering buttons.