Question

我对水平居中多个绝对div有疑问。我有一个父亲div，我是亲戚，包含四个子div。我希望他们能够均匀地居中。有没有办法集中四个div然后添加一次？或者我必须逐个定位它们吗？我现在拥有的是当我将divs置于绝对位置时。当它们居中时，它们堆叠在一起。

感谢您的时间。

Answer 1

您可以为子div定义div并使用display: flex。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

boxes {
  margin-top: 25px;
  width: 100%;
  position: relative;
  text-align: center;
}
.eq {
  display: flex;
}
.box {
  width: 300px;
  max-height: 400px;
  min-height: 233px;
  padding: 15px;
  border: 1px solid #e6e6e6;
  overflow-wrap: break-word;
  background-color: #fff;
  margin-right: 20px;
  ;
}

＆＃13;

<div class="boxes">
  <div class="box">
    <h3>MyBMW Login</h3>
    <form class="" action="index.html" method="post">
      <input type="text" name="email" placeholder="Emailadres">
      <input type="password" name="password" placeholder="Wachtwoord">
    </form>
  </div>
  <div class="eq">
  <div class="box">
1
  </div>
  <div class="box">
2
  </div>
  <div class="box">
3
  </div>
  </div>
</div>

＆＃13;

但是我必须删除position: absolute。如果不是您想要的，请提供更多详细信息。

Answer 2

将你的css改为此，为我工作。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.boxes {
  position: absolute;
  background-color: #000;
  display: flex;
  margin-top: 25px;
  width: 100%;
  text-align: center;
}

.box {
  position: relative;
  width: 300px;
  max-height: 400px;
  min-height: 233px;
  padding: 15px;
  border: 1px solid #e6e6e6;
  overflow-wrap: break-word;
  background-color: #fff;
  margin-right: 20px;
}

Answer 3

我不会将其视为绝对值，这些.box div必须是相对的，您可以使.boxes a＆＃34;位置绝对＆＃34;。

https://jsfiddle.net/DamianToczek/3w50gj28/4/

使.box绝对，ID .box不能绝对，你总是制作一个绝对的容器。如果你想使.box绝对，你需要给他们另一个像.box1 .box2 .box3的ID，最好的选择始终是一个容纳＆＃34;居中＆＃34;物品，容器是.boxes给你：

.boxes {
  width:100%;
  position:absolute;
}

以多个绝对div为中心

3 个答案: