比较text-align:center 和margin:0 auto

① text-align: 设置元素内文本或img标签等一些行内元素的水平对齐方式，作用于元素的内容或子元素。
注意：text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

div内的文本居中：

 <div>
        <h1>这是标题 1</h1>
        <h2>这是标题 2</h2>
        <h3>这是标题 3</h3>
    </div>

 <style>
        div {
            text-align: center
        }
    </style>

h1内的文本居中

<h1>这是标题 1</h1>

 <style>
       h1 {
            text-align: center
        }
    </style>

② margin:0 auto ；设置块级元素或者行内块级元素的居中，直接作用于元素本身。
注意：浮动、绝对定位、固定定位的盒子失效。相对定位有效，但是如果left值不为0，在水平方向上不会居中，因为偏差了一个left值。
对于带有宽度的块级元素，margin auto是不会失效的。

本文地址：https://blog.csdn.net/puddingcsdn/article/details/109254011