让div水平居中，HTML和CSS的多种实现方式

方法一：

为元素设置width宽度和margin:0 auto以及text-align:center; 实例如下：

<style>#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
  }</style>
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

方法二：

使用display: flex;和margin: auto， 实例如下：

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

方法三：

使用display: table;和margin: 0 auto;属性。 实例如下：

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>