协慌网

 登录 贡献 社区

如何水平居中 <div>？

如何使用 CSS 在另一个<div>水平居中<div> （如果可能的话）？ 

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

答案

您可以将此 CSS 应用于内部<div> ： 

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将width设置为50% 。任何宽度小于包含<div>宽度都可以。 margin: 0 auto是实际居中。

如果您的目标是 IE8 +，那么最好将其改为： 

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定width 。

这里的工作示例： 

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

如果您不想在内部div上设置固定宽度，可以执行以下操作： 

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这使得内部div成为可以使用text-align居中的内联元素。

最好的方法是使用CSS 3 。

盒子型号： 

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

根据您的可用性，您还可以使用box-orient, box-flex, box-direction属性。

Flex ： 

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读有关居中子元素的更多信息

这解释了为什么盒子模型是最好的方法 ：