实现元素的水平居中对齐

Question

<p>如何使用CSS将一个div在另一个div内水平居中？</p> <pre class="brush:html;toolbar:false;">&lt;div id="outer"&gt; &lt;div id="inner"&gt;Foo foo&lt;/div&gt; &lt;/div&gt; </pre> <p><br /></p>

Answer 1

如果您不想在内部的div上设置固定宽度，可以尝试以下方法：

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

这将使内部的div成为一个可以通过text-align居中的内联元素。

Answer 2

使用flexbox非常容易将div水平和垂直居中。

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

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