如何使div浮動到容器的中心，沿着動態元素將根據用戶的輸入添加

Question

我想使div浮動到它的容器div的中心，但事情是用戶可能決定添加1到12個元素，因此它們必須以4行爲單位浮動。因此，如果用戶只添加一個元素，則該元素應浮動到容器的中心，如果他/她添加了兩個元素，則必須漂浮到容器的中心但彼此相鄰。如果用戶添加5個元素，則前四個元素必須並排浮動（填充容器的寬度爲100％），第五個元素應位於第二行中間。這個圖片顯示我想要什麼來實現的：

圖1：一個元素

用戶輸入：只有一個漂浮到中心框。

圖2：兩個元件

用戶選擇的兩個元素，所以兩者浮動彼此的側和容器div的中心。

圖3：四種元素

用戶選擇的四個元素，所以該第一側是充滿時，容器div的100％是由與每個的25％四盒填充。

圖4：五行

如果用戶選擇5個元素，第五個應浮到容器div的中心，右邊的其它4個箱的第一行的下方。

隨着6盒：

七盒！

所以，在最後，我將通過添加一些asp.net VB，將帶來所需的框，一箇中繼器控制，根據存儲在SQL數據庫中的一些數據，並把所需的控制一個存儲過程。

我一直在嘗試不同的技術，但他們都沒有解決我的問題（保證金：0汽車;顯示：inline-block的;等等）

任何幫助將不勝感激！

感謝

Answer 1

這裏有一個Flexbox的解決方案：

HTML

<div class="container"> 
    <div class="box box1"><span>1</span></div> 
    <div class="box box2"><span>2</span></div> 
    <div class="box box3"><span>3</span></div> 
    <div class="box box4"><span>4</span></div> 
    <div class="box box5"><span>5</span></div> 
    <div class="box box6"><span>6</span></div> 
    <div class="box box7"><span>7</span></div> 
    <div class="box box8"><span>8</span></div> 
    <div class="box box9"><span>9</span></div> 
    <div class="box box10"><span>10</span></div> 
    <div class="box box11"><span>11</span></div> 
    <div class="box box12"><span>12</span></div> 
</div> 

CSS

html { height: 100%; } 

body {  
    height: 100%; 
    background-color: yellow;  
    } 

.container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    flex-wrap: wrap; 
    width: 400px; 
    height: 100%; 
    margin: auto; 
} 

.box { 
    height: 50px; 
    width: 75px; 
    margin: 10px; 
    background-color: lightgreen; 
    border: 1px solid #aaa; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 1.2em; 
} 

DEMO

在演示中，嘗試刪除任意數量的div。剩下的div將始終居中。

---

注意Flexbox將被所有主流瀏覽器，支持except IE 8 & 9。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請在左側面板中發佈您的CSS：Autoprefixer。