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

Posted 2023-03-05

【中文标题】CSS中的正确居中按钮[重复]

【英文标题】：Correctly Centering Button in CSS [duplicate]

【发布时间】：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. */

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

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

【问题讨论】：

css-tricks.com/centering-css-complete-guide

试试margin: 0 auto;

【参考方案1】：

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

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

【参考方案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 类中