使按钮响应并水平居中

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> 

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>