html - 如何将按钮对齐到屏幕中间？

Question

我正在尝试在屏幕中间放置 2 个按钮。但是，这些按钮与我现在拥有的代码重叠。我实际上并没有使用那么多的 CSS，所以这可能是一个新手问题。

这是我的 html:

.wrapper {
  text-align: center;
}

.button {
  position: absolute;
  top: 50%;
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
}

.button1:hover{
  border: 3px solid #000;
}

<div id="particles-js"></div>
<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

我不知道如何将这些按钮对齐到中间并在按钮之间留出一点空间。如果有人可以帮助我，我将不胜感激!

Answer 1

使用 text-align: center 水平居中嵌套元素

您可以通过在包含父元素 (.wrapper) 上声明 text-align: center 并声明 display: inline-block 在嵌套的子元素上。

position: absolute 必须删除，因为我们希望保留自然文档流中的元素 - 为了使此方法起作用，元素必须是 static 或 relative 定位的。

注意:对于水平对齐，使用 text-align: center 按预期工作，应满足一些要求:

1. 包含的父元素必须是 block 元素(例如: 显示: block )
2. 您需要居中的嵌套元素应该是inline-block 元素(例如:display: inline-block)
3. 不应在嵌套元素上声明 float 规则 打算水平对齐，float 规则将否定任何努力 以这种方式对齐元素

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
}

.button1.with-margin {
  margin: auto 10px; /* for additional spacing between inline elements*/
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>
<br>
<div class="wrapper">
  <button class="button button1 with-margin">button</button>
  <button class="button button1 with-margin">button2</button>
</div>

或者...您可以只使用 Flex...

使用flex-box水平居中嵌套元素

通过在包含的父元素(.wrapper)上声明display: flex，然后justify-content: center来指定水平对齐方式，您将获得预期的结果。 flex-box 利用浏览器的内置功能来完成所有“繁重的工作”和精确对齐的计算 - 顺便说一句，这也使它成为一种流行的响应式解决方案。

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

注意! flex-box 对旧版浏览器的支持很差或有限，因此如果您担心这一点，最好不要使用它在生产中。

IE <= 9 - 不支持
IE 10,11 - 部分支持
查看更多: https://caniuse.com/#feat=flexbox

编辑

使用 flex-box 和 position: absolute 进行垂直和水平对齐

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>