有时我们需要令一个宽度固定的容器里的子框架居中（例如一个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 浏览器的，我用傲游和世界之窗”，在这里我提醒一下大家，对这些无法解释清楚的人，我们可以简单地和他们说：“凡是能用支付宝的浏览器都是落后的，请放弃使用。”。
【CSS多个子框架居中】相关文章：