css 绝对定位后水平居中,有了绝对定位之后为什么水平居中效果没有消失呢？...

body{margin: 0;background:#333;}

ul{margin: 0;padding: 0;}

li{list-style: none;}

#pic{width: 400px;height:500px;position:relative;margin: 0 auto;}

#pic img{width: 400px;height:500px;}

#pic ul{position: absolute;top:0;right: -50px;}

#pic li{width: 40px;height: 40px;margin-bottom: 4px;background:#666;}

#pic .active{background:yellow; }

#pic p,#pic span{width: 400px;height: 30px;line-height: 30px;color:red;position: absolute;left:0;text-align: center;}

#pic span{top: 0;}

#pic p{bottom: 0;}

  

数据加载中

图片加载中

为什么我代码定位的是在父元素的left:0;处，显示的却是在水平居中位置呢？