html - 使按钮响应并水平居中

Question

我目前正在一个网站上工作，我正在尝试制作一个居中且响应迅速的按钮，但它就是不起作用!

HTML:

<div id="button-container">
  <button id="who-are-we" class="font-spec">quem somos</button>
</div>

CSS:

#button-container {
    width: 120px;
    display:block;
    position:relative;
    margin-top: 100px;
    margin-left: 50%;
    text-align: center;
    height: auto;
  }

#who-are-we {
    font-family: Volkorn;
    background: white;
    border: 4px solid black;
    cursor: pointer;
    max-width: 180%;
    max-height: 100%;
    width:220px;
    height: 70px;
    font-size: 200%;
    text-align: center;
  }

我尝试弄乱边距，但必须有一种更简单的方法来做到这一点，我还试图在窗口变小时使按钮变小。

Answer 1

分配宽度和高度时使用百分比 (%)。

此外，我不明白为什么#who-are-we 宽度 (220px) 大于 #button-container 宽度 (120px)

这是一个例子:

#button-container {
    width: 100%;
    display:block;
    position:relative;
    margin-top: 100px;
    text-align: center;
    height: auto;
}

#who-are-we {
    font-family: Volkorn;
    background: white;
    border: 4px solid black;
    cursor: pointer;
    max-width: 180%;
    max-height: 100%;
    width:220px;
    height: 70px;
    font-size: 200%;
    text-align: center;
  }

<div id="button-container">
  <button id="who-are-we" class="font-spec">quem somos</button>
</div>