親div内に複数のdiv要素を中央に配置するにはどうすればよいですか？

Question

私は大きなdivの中に小さなdivを中心に置こうとしています。私のコードは次のようになります。

Codepen Link

div.box-collective { 
 
    \t background-color: grey; 
 
    \t width: 100%; 
 
    } 
 
    
 
    div.box { 
 
    \t width: 100px; 
 
    \t height: 100px; 
 
    \t border: 1px solid black; 
 
    \t display: inline-block; 
 
    \t margin: 10px; 
 
    }

<div class="container"> 
 
     <h1>My boxes</h1> 
 
    
 
    \t <div class="box-collective"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    \t </div> 
 
    </div>

以来のより良いアイデアを得るために、これらの写真を見てください、私は言葉をどうしようとしていますかを説明することは不可能：

を

上記の場合、画面の幅はl arge（デスクトップ）。基本的には、私のコードはトップバージョンのように見えます。私は結果が一番下にあるもの、つまりボックスのグループが完全に中心にあることを望んでいます。この場合

、画面が小さく、各ボックスは、インラインブロックであるため、画面のサイズが変更されたとき、それらは自動的に新しい行に行きます。しかし、もう一度私はそれらを中心にしたい、右の写真に似ています。

純粋なCSSを使用してこれを実現するにはどうすればよいですか？どんな助けもありがとうございます。

Answer 1

div.box-collectiveクラスにtext-align:center;と入力するだけです。

div.box-collective { 
 
    background-color: grey; 
 
    width: 100%; 
 
    text-align:center; 
 
} 
 

 
div.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <h1>My boxes</h1> 
 

 
    <div class="box-collective"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
</div>

Answer 2

ソリューション1（最近のブラウザ） - フレキシボックス

を使用して、私は、これはすべての現代のWeb開発者のためのツールキットを持っている必要がありますだと思います。

• Awesome tutorial/cheatsheet

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    background-color: grey; 
 
} 
 

 
.container.small { 
 
    width: 50%; 
 
    margin-left: 25%; 
 
} 
 
.container .box{ 
 
    display: block; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
    margin: 3px; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 
<div class="container small"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

ソリューション2からdisplay: inline-block & text-align: center;：

.container { 
 
    text-align: center; 
 
    margin: 1em 0; 
 
    padding: 1em; 
 
    background-color: grey; 
 
} 
 

 
.container.small { 
 
width: 50%; 
 
    margin-left: 25%; 
 
} 
 
.container .box{ 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
    margin: 3px; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 
<div class="container small"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 3

text-align: center;このケースで動作しますが、もう少しコントロール用（およびテキストの配置をリセットせず）ジャスト `テキスト整列追加フレキシボックス

div.box-collective { 
    background-color: grey; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
} 

div.box { 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    display: inline-block; 
    margin: 10px; 
    flex: 0 0 auto; 
}