html - 如何在不重叠的情况下将两个 居中？

Question

我试图以按钮的形式将两个 div 元素居中。但是我尝试的任何事情似乎都没有用。我得到的最远的是通过 position: absolute; 将它放在中间，但是当我这样做时，两个元素会相互重叠。

我目前使用的代码:

/* For the button: */

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
}


/* For the hover effect: */

.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}

<div class="btn1">
    <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
</div><br>
<div class="btn1">
    <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>

提前致谢!

Answer 1

希望这对您有所帮助。我为 btn1 使用 margin-right:auto 和 margin-left:auto 使其水平居中和

.btns{
上边距:50%；
变换:翻译Y(-50%)
}

垂直居中

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;

}
.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}

.btns{
  margin-top:50%;
  transform:translateY(-50%)
  }

<div class="btns">
  <a class="btn1" href="showTable.php"><b>Reserveringen</b></a>
  <a class="btn1" href="logout.php"><b>Logout</b></a>
</div>