不定宽状水平居中方法看不懂该怎么理解？

Question

不定宽块状元素方法通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。这个应该怎么理解？请用很通俗的语言解释，课程上的看不懂。

Answer 1

看吧·

Answer 2

<div class="outer">
  <div class="wrap">
    <div class="inner"></div>
  </div></div>

CSS代码为：
.wrap{
float:left;
position:relative;
left:50%;}.outer{
width:300px;
height:400px;
background:#FFCC99;}.inner{
width:100px;
height:100px;
background:#C33;
position:relative;  /*????*/
left:-50%;}