Question

我的页面上有这个按钮，当前与屏幕左侧对齐，但我希望它在中间。实现这个目标的正确方法是什么？

HTML

<button class="button">Button</button>

CSS

.button {
    background-color: #4CAF50; /* Green */
    border: none;

    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

Answer 1

添加wrapper text-align: center;和position按钮，将其置于中心位置：

＆＃13;

.wrapper {
  text-align: center;
}

.button {
  position: absolute;
  top: 50%;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

＆＃13;

<div class="wrapper">
  <button class="button">Button</button>
</div>

＆＃13;

Answer 2

你必须把按钮放在div

中

<div style="width:100%; text-align:center;">
  <button class="button">Button</button>
<div>

您可以在此处查看Demo

Answer 3

这些天使用CSS3应该是最佳选择。这样，元素（按钮）的大小也无关紧要。

.button {
    /* THE MAGIC */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    /* YOUR STYLINGS FROM QUESTION */
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<button class="button">Button</button>

如果你想水平和垂直居中，它几乎是相同的

.button {
    /* THE MAGIC */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* YOUR STYLINGS FROM QUESTION */
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<button class="button">Button</button>

将此按钮居中的正确方法是什么？

3 个答案: