设置wrap浮动是为了脱离其他块状元素的空间限制变成独立元素，这样设置wrap的left的50%，是以整个body(浏览器窗体)为参考向左移动了百分之50(但是这时候这个wrap的div并不是居中的，准确来说整个页面的居中线是在这个wrap的左边框线上)。而此时wrap-center是处于wrap窗体(父元素)的中心(居中状态),相对父元素(大小百分比)移动50%正好移动到父元素的左边框线上(即上面说的页面中心线)。

同问为什么要设置浮动

.wrap{
    float:left;
    position:relative;
    left:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
首先让 class 为 wrap 的div浮动，并设置  position:relative; left:50%; 让其最左侧同其父元素（我的理解就是body）的水平方向的平分线对齐，，然后设置 class 为 wrap-center 的div平分线与class 为 wrap 的div的最左侧对齐，这时class 为 wrap-center 的div就居中了。

当然，因为是relative浮动，，所以列表会被盖住，你可以加margin-top或者br换行避免盖住。

同求，水平居中的这里将的太模糊了 

没看懂