居中多個絕對div div

Question

我有一個關於居中多個絕對div水平居中的問題。我有一個父母的div，我相對包含四個子div。我希望他們均勻地居中。有沒有辦法集中四個div，然後添加一次？或者我必須一個接一個地定位他們？我現在擁有的是當我將div放在絕對位置時。當它們居中時，它們堆疊在一起。

謝謝你的時間。

Answer 1

您可以爲您的子div s定義div，並使用display: flex。

* { 
 
    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; 
 
    ; 
 
}

<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>

但是我不得不刪除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一個「位置絕對」。

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

使.boxes絕對，ID .box不能是絕對的，你總是使一個容器是絕對的。如果你想讓.box成爲絕對的，你需要給他們另外一個id，比如.box1 .box2 .box3，最好的選擇總是容納「居中」項目的容器，容器是你的.boxes：

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