代码：
<style>
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:50%;
top:50%;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
left:50%这代表什么？为什么是移动body的50%的距离？
为什么使用top:50%却没有效果？
这个以body为参照，就是移动页面宽度的50%
页面的长度是没有限制的 ，你可以一直滚动页面往下拉，so
left:50%代表父级容器的一半宽度。在你这里是body.
在父级div上加一个position：relative,这里用absolute试试？
div1是放置在body中，所以是移动body的50%