ブートストラップカラム内でdivをセンタリングする際に助けが必要

Question

私はあなたの助けが必要です 私は4列幅のブートストラップカラムと内容（各四角形と言う）を各カラム内に作成しようとしています。しかし、各矩形を列の中央に配置する方法を見つけることはできません。私はあなたの助けがページの反応レイアウトを台無しにすることなく、四角形を一元的に配置する方法を見つける必要があります。

Answer 1

この商品をお求めの客様はこんな商品もお求めです。全ページを見る。

.rectangles1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: purple; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles4 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    text-align: center; 
 
    margin: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 

 
    <div class="border row"> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles1"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles2"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles3"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles4"></div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

あなたは、フレックスボックスの垂直整列方法を試みることができます。そして、これをあなたの矩形を中心にしたい親divに追加したい（I.E。あなたのrectのために作ったcol）

.aligner{ 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
}