使用相对定位 水平居中

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就可以让它居中了。简单一句