實現元素的水平居中對齊

Question

如何使用CSS將一個&lt;div&gt;在另一個&lt;div&gt;內水平居中？ &lt;divid="outer"&gt;&lt;divid="inner"&gt;Foofoo&lt;/div&gt;&lt;/div&gt;

P粉002023326 · Answer

如果您不想在內部的div上設定固定寬度，可以嘗試以下方法：

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

#inner {
  display: inline-block;
}

  
    Foo foo

這將使內部的div成為一個可以透過text-align居中的內聯元素。

P粉617597173 · Answer

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

#inner {  
  border: 0.05em solid black;
}

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


  Foo foo