css - フローティングコンテンツでラッパーを中央に配置する方法

Question

300 x 300 div の大きなラッパー ラッピング番号があります。ブラウザが全画面表示の場合、ラッパーは中央に配置されます。しかし、ブラウザーのサイズを変更すると、コンテンツは 2 番目の行に流れますが、ラッパーはウィンドウの 100% を占有します。たとえば、ブラウザ ウィンドウの幅が 800px の場合、コンテンツは 300px x 300px の 4 ブロックであるため、2 つのブロックを合わせても 600px しか占有せず、他の 2 つのブロックは 2 行目にあります。私の問題は、ラッパーが 800px に伸び、コンテンツが画面の左側に配置され、中央に配置したいことです (float: left を使用する場合) display: inline-block と text-align: center を使用して同じことを試みると、ラッパーが幅の 100% に伸びても、コンテンツを画面の中央に配置できます。問題No1。

ウィンドウが小さい場合、3 番目のオレンジ色のボックスが 2 行目に落ちますが、中央に配置されます。text-align: left を使用すると、すべてのボックスが左側に配置され、右側にかなりのスペースが残ります。

ここに私がサイトに持っている関連CSSがあります:

#site-wrapper {
    min-height:100%;
    text-align: center;
    position:relative;
}

#container {
   position:relative;
   width: auto;
   margin: 0 auto;
   display: inline-block;
   padding-bottom:40px;   /* Height of the footer */
}

div#content-wrapper{
   padding:5px 0 5px 0;
   font-size: 0;
   text-align: center;
   margin-left: auto;
}

#column1, #column2, #column3 {
    margin-right: 5px;
}
#column-last{
    margin-right: 5px;
}
div.column {
    //float: left;
    display: inline-block;
    vertical-align: top;
    font-size: 0;

}
.item {
    background: #0072C6; 
    width: 20em;
    padding: 5px;
    height: auto;
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #FFF;
    box-shadow: inset 0 0 100px #1082D6;

}