在CSS中正确居中按钮

Question

我看过这个问题，并回答了无数次，但没有一个答案似乎解决了似乎是左上角居中而不是按钮中心的问题。随着您增加按钮的大小，这一点很快变得明显。这是一个示例：

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. */
}

亲自看看：http://jsfiddle.net/7Laf8/3024/

我的问题：如何定位按钮的中心，使其位于屏幕/ div的中心？

Answer 1

您可以将transform:translateX(-50%) translateY(-50%);添加到.button样式中以使其完美居中。

或者，有flexbox- and grid-based solutions。

Answer 2

http://jsfiddle.net/7Laf8/3035/这种解决方案可能就是您要寻找的

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

我在display: flex类中添加了justify-content: center，align-items: center和wrapper