请问display:table与margin:0 auto使元素居中的原理

Question

水平居中有一种常见的实现方式，就是子元素设置display:table，margin:0 auto，代码如下

<style>
    .parent_3 {
    }
    .child_3 {
        display: table;
        margin: 0 auto; 
    }
</style>
<section class="parent parent_3">
    <article class="child child_3">我要水平居中</article>
</section>

浏览器效果如图所示

table与block都可以声明块级元素，为什么block达不到这样的效果
当display为table时，元素的表现特性是什么？

Answer 1

使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 　　
将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。
而用block则需要知道父级的宽高。