SOURCE

<p class="bold">1 给父容器设置text-align实现子元素居中</p>
<em>注意text-align是可以继承的，所以这里所有的span div都是文字居中的。
所以text-align不是让块元素居中，块元素其实只是平铺了宽度，100%的宽度。但是文字居中了
</em>
<div class="rb" style="text-align:center">
  使文字居中 i am center <br>
  <span class="rb">i am  a span in center</span>
  <div class="rb">i am a div in center too,但是如果给我width我就不居中了</div>
</div>

<p class="bold">2 固定宽度。使用margin+width实现元素自身居中.（不是父元素，也不是子元素，是自身）</p>

  <div class="rb" style="margin:0 auto;width:300px;">i am in center。但是我是div</div>


<p class="bold">3 不固定宽度。使用text-align+display: inline-block实现</p>
<em>给子元素设置inline-block。具有包裹性。包裹了内容。注意：这里是inline-bloock。不是inline元素。text-align对inline元素无效</em>
<div class="rb" style="text-align:center">
  啊啊啊啊啊
  <span>asfasdf</span>
  <div class="rb m5" style="display:inline-block">i am inline-block</div>
</div>

<p class="bold">4 不固定宽度。只设置子元素。设置子元素display为table。+margin实现</p>
<em>display为table和上面display为inline-block一样具有包裹性。但是这里和上面不一样的是这里使用margin设置div实现div居中</em>

  <div class="m5 bcgreen" style="display:table;margin:0 auto">i am in center</div>


<p class="bold">5 不固定宽度。只设置父容器。但是父容器是table。即使用table包裹div.给table设置margin实现</p>
<table style="margin:0 auto">
  <tr>
    <td>
      <div class="bcgreen">i am in center</div>
    </td>
  </tr>
</table>

<p class="bold">6 使用float+position:relative实现</p>
<div class="clearfix">
<div style="float:left;position:relative;left:50%;">
  <div class="bcgreen" style="position:relative;left:-50%">i am in center</div>
  
</div>
  </div>


<p class="bold">7 使用flex实现</p>
<div style="display:flex;justify-content:center;">
  <div class="bcgreen">i am in center</div>
</div>

<br /><br /><br />
<hr />

<ul>
  <li>margin：0 auto 是的div元素自身居中</li>
  <li>text-align有继承性，所以你设置了父元素，子元素也会继承，但是对行内元素不适用</li>
  <li>display:inlnie-block,table,或者table包裹都具有包裹性</li>
  <li>还有注意clearfix的两种方式，一种是clear属性，这个需要给float元素的相邻元。而after伪类方式是给float元素的父元素。</li>
  <li>一个div设置了margin:0 auto后，要么设置width要么设置display为table</li>
</ul>

.rb{
  border:1px solid red;
}
.bcgreen{
  background-color:green;
}

.bold{
  font-weight:bold;
}

.m5{
  margin:5px;
}

.clearfix:after{
  content:'';
    display:block;
  height:0;
    overflow:hidden;
    clear:both
  
}

em{
  font-size:12px;
  background-color:#ccc;
}