HTML，CSS - 将按钮对齐到页面中心[重复]答案

【问题标题】：HTML, CSS - Aligning Buttons To The Center Of Page [duplicate]HTML，CSS - 将按钮对齐到页面中心[重复]
【发布时间】：2018-02-25 12:49:55
【问题描述】：

我想将一些按钮对齐到页面的中心。请问我可以在我的CSS中如何做到这一点。

button {
  background-color: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
  position: middle;
}

<button type="button" onclick="document.getElementById('id01').style.display='block'" style="width: auto;">User Login</button>
<br><br><br>
<button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto; ">Admin Login</button>

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

如果flexbox 是一个选项，您可以添加：

body {
  margin: 0;
  height: 100vh; // stretch body to the whole page
  display: flex; // define a flex container
  flex-direction: column; // arrange items in column
  justify-content: center; // align vertically center
}

（注意position: middle 是无效）

请看下面的演示：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

button {
  background-color: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
}

<button type="button" onclick="document.getElementById('id01').style.display='block'" style="width: auto;">User Login</button>
<br><br><br>
<button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto; ">Admin Login</button>

【讨论】：

非常感谢，先生。这对我来说非常有效。
好的，所以我想我需要对我的答案更加负责......我回答了一个常见的重复......你的答案在我标记的重复中，除了你需要将flex-direction 指定为column... :)

【解决方案2】：

如果您不想使用 Flexbox，只需将您的 buttons 包装在 div 中并将其设置为 position 到 absolute，top 到 50%，left 到 50%和transform 到translate(-50%, -50%)，也给父或body 元素positionrelative。

请注意，body 或包含.buttons-holder 的父级必须是已定义的height。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
}

.buttons-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  background: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 15px auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
}

<div class="buttons-holder">
  <button type="button" onclick="document.getElementById('id01').style.display='block'" style="width:auto">User Login</button>
  <button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto">Admin Login</button>
</div>

【讨论】：