css - 填充适用于按钮，居中不起作用

Question

我试过使用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文件。

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

标签： cssbuttoncenter

Answer 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;
}