有時我們需要令一個寬度固定的容器裡的子框架居中（例如一個 Div ，或者其他 block 級元素），如果子框架只有一個的話，我們只需要為子框架加上 CSS 屬性 margin: auto 就可以了。
但如果我們要讓多個子框架居中，並且等分父框架剩余的空間的話，我們對所有子框架使用 CSS box-align: center 來實現這種效果。
可是目前還有相當一部分主流浏覽器不支持 box-align 屬性，那麼我們應該如何編寫 CSS，使這種效果能兼容大部分的浏覽器呢？
通常的方法
為了使多個 block 級元素排列在同一行裡，我們習慣使用 float 屬性使子框架浮動，然後利用 margin 屬性讓每一個子框架之間都留出一些空白的間距。可是這樣做會觸發經典的 IE6 雙倍 margin BUG，這樣反而要投入額外的時間去調試 IE6 的 Hack。
雖然我們還可以通過 display: inline 來避開 IE6 的 BUG，但我們仍然需要調整這些子框架間的間距，防止最後一個自框架被擠到下一行。
改變子框架級別並且控制剩余的空白
使用 float 和 margin 來讓多個子框架居中並且等分父框架剩余空間的做法缺點很多。為了避開這些缺點，我們還可以使用另一種方法：把子框架的級別改為 inline-block ，並且通過 letter-spacing 屬性 控制自框架之間的間距。
假設在一個父框架裡有四個 block 級的子容器，每個子容器的大小均為 100px x 100px。為了讓這些子框架能排列在同一行內，我們可以把它們改為 inline-block 級，由於子框架和父框架之間並沒有其它的內容，應此要控制子框架的空間分配將易如反掌。姑且假設父框架 id=parent，子框架 class=child，那麼 CSS 可以這樣寫：
以下為引用的內容：
#parent {
width: 615px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
whitewhite-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
在這段樣式裡，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 這些屬性是實現預想效果的關鍵，下面解釋一下這些屬性起了什麼作用。
text-align：使 #parent 裡的所有內容都居中
letter-spacing：控制每個子框架之間的空白大小
white-space: nowrap：防止最後一個子框架被擠到下一行
overflow: hidden：隱藏超出 #parent 范圍的內容
vertical-align: middle：使所有子框架都垂直居中
display: inline-block：是所有子框架都排列在同一行，並且保持 block 級元素的特性
兼容 IE
在今時今日，老版本的 IE 浏覽器已經成為網頁設計師的心頭大恨，雖然上面的 CSS 能兼容 IE8，但由於 IE6 和 IE7 並不完全支持 inline-block 級元素，因此我們還需要寫下面的一段 Hack，確保在 IE6 和 IE7 裡能保持和現代浏覽器一致的效果。
以下為引用的內容：
.child {
*display: inline;
*margin: 0 20px 0 20px;
}
本文所舉例子的最終效果可以看這個 DEMO。
後記
本文所舉的例子雖然只有短短的兩句 IE Hack，但在實際開發中大家要寫的 Hack 肯定要多很多，因此淘汰老版本 IE 的任務已經刻不容緩。我聽過很多人說：“我不用 IE 浏覽器的，我用傲游和世界之窗”，在這裡我提醒一下大家，對這些無法解釋清楚的人，我們可以簡單地和他們說：“凡是能用支付寶的浏覽器都是落後的，請放棄使用。”。
原文地址：http://blog.imbolo.com/center-multiple-divs-with-CSS/