关于display:table水平居中的研究

前一段时间在工作中遇到一个问题，类似需要将如下的id="c"（以下简称c）的div水平居中，最先想到的办法是利用a的宽度固定的这一点，直接css声明c的父元素b的margin为固定数值，验证时才发现业务需要，c的宽度是可能动态变化的，写死b的margin数值依然会出现c不居中的问题。

<div id="a" width="100px">    <div id="b">    <div id="c" style="float: left;"></div></div></div>

由于c是一个float元素，声明b的margin为auto仍然无法让c居中，最后在同事指点下，声明b的display为table，margin为auto，解决了问题。

关于display:table为何可以做到让float的，并且宽度动态变化的子元素水平居中，详细研究如下：

W3C标准关于display的介绍：http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#display-prop

These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

由上可以看出display:table允许元素的表现如table一样，并且表格本身属于块级元素；

再看如下关于table宽度的说明：http://www.w3.org/TR/html401/struct/tables.html#h-11.1

This attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space.In the absence of any width specification, table width is determined by the user agent.

最后一句解释了table的宽度是根据内容确定的；

与div（默认display为block）相比较，table的宽度是会根据子元素自适应的，而div如果不设置width，无论子元素多宽，它永远占满一行。

由此得出结论（以下纯个人理解）：

在子元素声明了float，游离于div之外时，div{display:block}是无法通过声明margin:auto去影响子元素的margin，因为它的宽度不由子元素决定可以说跟子元素无关，而div{display:table}则会根据子元素的宽度动态调整自己的宽度与其适应，同时声明margin:auto则可以使自己水平居中，等同于让子元素水平居中。

关于display跟float，以上情况仅仅限定在各元素的position为默认值static的情况下的表现，根据W3C标准中的介绍，在position为absolute或fixed时，float就会失效等等还有其他更多情况请查阅：http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#dis-pos-flo

关于display的其他值如table-cell，table-row，其实都是异曲同工复制了table element的一些布局表现，由于暂时没有在工作上用到，不浪费时间研究。

以上内容代码测试全部只在Chrome上验证过。

关于本文后记总结：

对于我来说看W3C标准非常累，因为是全英文的，但是能清晰准确知道html元素，css各样式的用法标准，单纯的写代码测试永远只能通过看各种不同排列组合的现象去猜测标准已经写好的内容，只能记忆现象而无法理解，即使理解也容易理解出问题，无法准确了解标准的规则，用法。正确的做法是先看W3C标准，再写代码测试，效率起见，少用的偏门的html，css知识就无需麻烦W3C标准了，常用的东西翻一翻标准，还是受益匪浅的。