<div class="a"><div class="b"></div></div>
.a{ width:200px; }
.b{ width:100px; }为什么必须要a{ text-align:center; } .b{ display:inline-block; }才能让b在a中水平居中？而单独使用a{ text-align:center; }b不能水平居中？
text-align:center只對行級元素起作用，所以b要加上display:inline-block,讓他具有行級元素的表現。不然作為塊元素的b，要加上margin:auto才會居中的
行内元素与块级元素比较全面的区别和转换
首先推荐我找到的一篇描述行内元素和块级元素区别的文章给您（如果您用得到的话）
然后，text-align:center是针对行内元素的。
如果想要把行内元素转换为块级元素，可以使用：
display:block;如果想要让块级元素具备行内元素的特性：可以使用：
display:inline-block;div是块级元素
首先 text-align 本身就是针对具有inline特性的元素的。对应display:block,默认宽度撑满一行，即使你给他制定了宽度，如果不具有inline的特性，仍然不会跟着text-align去走。
设置inline—block能让元素具有行元素的特点也不默认沾满整行，还具有块元素属性可以设置宽高，text—center是文本居中，块元素不是文本