CSS中的正确居中按钮[重复]答案

【问题标题】：Correctly Centering Button in CSS [duplicate]CSS中的正确居中按钮[重复]
【发布时间】：2018-12-06 20:21:06
【问题描述】：

我已经多次看到这个问题被问及回答了很多次，但似乎没有一个答案能解决左上角居中而不是按钮中心的问题。当您增加按钮的大小时，这很快就会变得明显。这是一个例子：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案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 类中

【讨论】：