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

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