开发者问题收集

如何使元素水平居中？

2008-09-22
4931580
html css alignment centering

如何使用 CSS 将 <div> 水平居中于另一个 <div> 内？ 

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
3个回答

使用 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>

要将 div 垂直居中，请使用属性 align-items: center 。

其他解决方案

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

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

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

如果您的目标是 Internet Explorer 8 （及更高版本），最好改用以下代码： 

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

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

工作示例在这里： 

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
2008-09-22

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

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

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

这会使内部 div 变成可使用 text-align 居中的内联元素。

2011-01-20

带有 Flexbox 的现代盒子模型 

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

旧盒子模型（已弃用）

display: box 及其属性 box-pack 、 box-align 、 box-orient 、 box-direction 等已被 flexbox 取代。虽然它们可能仍然有效，但不建议在生产中使用。 

#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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

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

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

2012-08-30