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

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

如果从按钮中移除绝对位置，它会自动居中

＆＃13;

＆＃13;

.wrapper {
  text-align: center;
  background:#ccc;
  padding: 20px;  
}

/*.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用屏幕简短更新答案。为此，只需将两个div包装在一个父div中并设置相对于它的位置。并在.wrapper中添加绝对位置。

＆＃13;

＆＃13;

.hero-banner {
  background:#ccc;
  height: 300px;
  position: relative;
}
.wrapper {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

您可以通过在包含的父元素（text-align: center）上声明.wrapper并在嵌套的子元素上声明display: inline-block来实现此目的。

必须删除

position: absolute，因为我们希望在文档流中保留元素 - 为了使此方法有效，元素必须为{ {1}}或定位static。

注意：进行水平对齐，使用relative按预期工作，应满足一些要求：

1. 包含的父元素必须是块元素（例如： text-align: center）
2. 您需要居中的嵌套元素应为 inline-block 元素（例如：display: block）
3. 不应在嵌套元素上声明display: inline-block规则 为了水平对齐，float规则将否定任何努力 以这种方式对齐元素
＆＃13;
＆＃13;
float
＆＃13;
* {
  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;
}
＆＃13;
＆＃13;
＆＃13;

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

使用<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-box）上声明display: flex，然后.wrapper指定水平对齐，您将获得预期的结果。 justify-content: center利用浏览器的内置功能来完成所有“繁重的工作”。和计算精确对齐 - 顺便说一句，它也使它成为一种流行的响应解决方案。

flex-box

＆＃13;
＆＃13;
.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;
}
＆＃13;
* {
  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;
}
＆＃13;
＆＃13;
＆＃13;

抬头！ <div class="wrapper"> <button class="button button1">button</button> <button class="button button1">button2</button> </div>对旧版浏览器的支持很少或有限，所以如果这对您来说是个问题，最好不要使用它在生产中。

IE＆lt; = 9 - 不支持
IE 10,11 - 部分支持
查看更多内容： https://caniuse.com/#feat=flexbox

修改

垂直＆amp;使用flex-box＆amp;进行水平对齐flex-box

position: absolute

＆＃13;
＆＃13;
.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;
}
＆＃13;
* {
  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;
}
＆＃13;
＆＃13;
＆＃13;

Answer 3

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

Answer 4

<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
.wrapper {
  text-align: center;
  display: inline-block;
}

.button {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.button1 {

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

}

.button1:hover{
  border: 3px solid #000;
}
</style>

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