为什么在子元素上加margin:0 auto不能居中 给父元素加上text-align才能居中?

#div1{height: 80px;width: 500px;background-color: blue;position: relative;} #sp1{display: inline-block;margin:0 auto;height:30px;background-color: red;width: 100px;} <div id="div1">     <span id="sp1">aaaaaaaaaaa</span> </div>