填充适用于按钮，居中不起作用答案

【问题标题】：Padding works on button, centering doesn't填充适用于按钮，居中不起作用
【发布时间】：2021-12-19 10:43:17
【问题描述】：

我已尝试使用text-align: center;、justify-content: center; 和align-items: center;，但此按钮的位置仍将保持不变。

如果我尝试使用填充，例如padding: 750px，它会起作用，并且按钮会移动到中心。

这是我的那个按钮的 HTML 代码：

<div class="container">
   <div class="btn">
      <span>Lorem Ipsum</span>
   </div>
 </div>

这是我的button.css 文件。

请问如何使我的按钮居中？谢谢！

【问题讨论】：

margin: auto 到 .btn 怎么样？
span 仅使用与内容匹配的空间，因此使文本居中无效，因为它在具有精确匹配大小的容器中居中。像@SatoTakeru 建议的那样使用margin: auto 应该可以工作
我刚才尝试在它上面做margin: auto;，它成功了！谢谢！
是的，@jkoestinger，我不是说margin: auto 到span，我是说.btn。

标签： css button center

【解决方案1】：

我在这里用你的 CSS 做了一个测试，问题是宽度，我取出后文本在中心

            .container {
  text-align: center;
  justify-content: center;
  align-items: center;
}
        .btn {
  height: 100px;
  color: var(--white);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 23px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  cursor: pointer;
  line-height: 90px;
 
  transition: all 0.3s;
  position: relative;
}

【讨论】：