使按钮响应并水平居中

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

我试过弄乱边距，但必须有更简单的方法，我还试图在 window 变小时使按钮变小。

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>

Answer 2

不清楚是垂直居中还是水平居中，这里有一个水平居中的例子，按钮是页面的width:30%;。按钮居中是因为它的父元素是 100% 宽度（默认情况下因为它是 div）并且有 text-align: center; 居中所有子元素。

#button-container {
    margin-top: 100px;
    text-align: center;
  }

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

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

使按钮响应并水平居中

Make a Button Responsive and Centered Horizontally

html

css

responsive-design