Question

我有一个简单的任务，创建一个始终居中的按钮。什么是最好的方法，可以简单地完成吗？

到目前为止，我已经制作了一个蓝色按钮，但出于某种原因，当我走高100％，宽度为100％时，它并没有填满整个屏幕。 https://imgur.com/a/EIznC，为什么html主体不会默认为页面的100％？

到目前为止

代码：

Style.css，使用角项目。

.body {
    height: 100%;
    width: 100%;
}

app.component.ts <button class="button button5"> </button>

app.component.css

.button {
    background-color: #0066ff;
    border: 1px solid blue;
    color: white;
    height: 100%;
    width: 100%;
}

.button5 {border-radius: 50%;}

我希望我的按钮占据整个页面，就像它的父母一样。（正文）应该是页面的100％。

Answer 1

如果使用flex-box

，则在页面上居中按钮相对简单

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  background-color: #838383;
  color: #fefefe;
  padding: 16px;
  /* ...if you really want it to be 100% of the screen un-comment below */
/*   height: 100%; 
  width: 100%; */
}

<button class="button"> I am a centered button </button>

Answer 2

您是否尝试过简单（但不推荐使用<center>标签？我一直都在使用它。工作得很好。

如果没有，您可以使用margin-left: calc(50% - 50px);如果图像宽度为100px。您可以使用text-align:center;或align:center;

在移动设备和桌面设备之间制作响应按钮

2 个答案: