使用相对定位 水平居中

Question

.wrap{
    clear:both;
    float:left;
    position:relative;
    left:50%;
    border:2px solid green;
}
.wrap-center{
    
    position:relative;
    right:50%;
    border:3px solid red;
    
    
}

为何在父元素.wrap中，当position设置left值为50%的时候，实际（图中绿色框）会在浏览器窗口居中偏右的位置？

而是需要在子元素.wrap-center的position属性设置right=50%或者left=-50%才能使其居中。

Answer 1

.wrap也是有宽度的，left设置为50%的意思就是这个元素的最左边是left 50%，所以还需要margin-left: (-宽度/2)px才行;给定宽度的话，直接margin auto最简单

Answer 2

给它设置一个宽度，用margin:0 auto就可以让它居中了。简单一句