複数の絶対divをセンタリング

Question

複数の絶対divを水平にセンタリングすることについて質問があります。私は4つの子divを含む親子divを持っています。私はそれらを均等に集中させたい。 4つのdivを中央に配置して一度追加する方法はありますか？あるいは、私はそれらを一つずつ配置しなければなりませんか？私が今あるのは、divsを絶対的な位置に置くときです。それらは、中心に置かれたときに互いの上に積み重なります。

ありがとうございます。

Answer 1

サブdivにはdivを定義し、display: flexを使用することができます。私はposition: absoluteを削除する必要がありましたが

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

。もしそれがあなたが望むものでないなら、私たちに詳細を教えてください。

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アブソリュートを作成したい場合は、.box1 .box2 .box3のような別のIDを指定する必要があります。最適なオプションは、常に「センタリングされた」アイテムを保持するコンテナです。コンテナは.boxです。

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