前面那位慕粉XXXXX说的很正确，我也要补充一下细节。外层的<div>元素通过position:relative;left:50%;的样式转到了页面中线右侧，这种方法是前面课程说到的"层模型中的相对定位"，left:50%的意思就是把<div>元素依照原位置从左向右移动其原有宽度的50%的距离，记得吗，块级元素都是独占一行，宽度占满。<div>元素内部的子元素要相对于<div>元素进行定位，同样的，通过position:relative;left:-50%;的样式，子<div>元素把自己的一半从右向左移到了中线的左侧。这也是前面说的到"层模型中的相对定位"。大家可以通过设置background或者border来帮助理解呀。

看到了吗？红底蓝边的就是父div，黄底绿边的就是子div，父div左边border就是中线。

<style>
.wrap{
    float:left;
    background: red;
    border:2px solid blue;
    position:relative;
    left:50%;
}
.wrap-center{
    background:yellow;
    border:2px solid green;
    position:relative;
    left:-50%;    
}
</style>

通过修改left的值，很容易就能理解的

依然不明白

最佳答案没有说清楚。我来说一下。

首先，上级元素设置了position:relative;left:50%;意味着上级元素最左边现在在页面中线位置了。如果子元素不设置left -50%，那么就是从中线位置开始写了。所有内容从中线开始写，必然就都写在右边了。所以通过left -50的设置让内容的一半在中线左边，一半在中线右边。达到居中效果。

可以理解成向左移动50%的距离，50%参考上一级的大小。

直接理解成向左移动不就好..