margin 百分比值

    刚才看BootStrap源码中，carousel组件中，

<!-- HTML代码 -->

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- CSS代码 -->

.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}

　　无意看了下源码，发现，这个ol标签自身宽度设置为父级60%宽度，然后设置了一个负的margin来实现indicators这个组件的居中对齐。

　　margin的百分比是宽度是由父元素（或者说包含块盒子）的宽度来决定的。

　　MDN中说明 margin的百分比值为 ： refer to the width of the containing block

　　延伸一点讲，即使是子元素的高度的margin也仍然是基于父元素的宽度。

可以参考图灵上的一个demo 我整理在我的codepen里。http://codepen.io/CoolHector/pen/JXWzYp

　　可以参考这篇文章，很赞http://www.ituring.com.cn/article/64581

参考：http://www.ituring.com.cn/article/64581

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/margin