<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/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;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="pic">
<img src="C:/Users/冯新星/Desktop/Saved Pictures/pic.jpg"/>
<span>数据加载中</span>
<p>图片加载中</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
为什么我代码定位的是在父元素的left:0;处，显示的却是在水平居中位置呢？
奋斗好青年