Correctly Centering Button in CSS

Question

I have seen this question asked and answered numerous times, but none of the answers seem to address the problem that it seems to be the top-left corner being centered, not the center of the button. This quickly becomes apparent as you increase the size of the button. Here is an example:

HTML

<div class="wrapper">
  <button class="button">Hello</button>
</div>

CSS

.wrapper {
  text-align: center;
 }

.button {
  position: absolute;
  top: 50%;
  font-size: 5rem; /* Just to make the issue apparent. */
}

See for yourself: http://jsfiddle.net/7Laf8/3024/

My question: how do you position the button so that its center is at the center of the screen/div?

https://css-tricks.com/centering-css-complete-guide/ – Blazemonger Jun 27 '18 at 20:55 — Blazemonger, Jun 27 '18 at 20:55

score 3 · Accepted Answer · answered Jun 27 '18 at 20:53

3

You can add transform:translateX(-50%) translateY(-50%); to the .button styles to center it perfectly.

Alternatively, there are flexbox- and grid-based solutions.

answered Jun 27 '18 at 20:53

Blazemonger

90,923
26
142
180

score 2 · Answer 2 · answered Jun 27 '18 at 21:02

http://jsfiddle.net/7Laf8/3035/ this solution might be what youre looking for

.wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

I added the display: flex, justify-content: center, and align-items: center to the wrapper class

Correctly Centering Button in CSS

2 Answers2