如何使用 CSS 将元素水平居中？

如何使用 CSS 将元素水平居中到另一个？
<div><div>

<div id="outer">
  <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>

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

分割线

网友回答：

有了它，很容易将div水平和垂直居中设置样式。flexbox

#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;
}

当然，您不必将设置为 .任何小于包含的宽度都可以。这是实际居中所做的。width50%<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>

分割线

网友回答：

最好的方法是使用 CSS3。

旧盒子模型（已弃用）

display: box及其性质、、、等。已被弹性框取代。虽然它们可能仍然有效，但不建议在生产中使用。box-packbox-alignbox-orientbox-direction

#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

带有弹性盒的现代盒子模型

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

阅读有关使子元素居中的详细信息

CSS 盒模型模块级别 3
盒子模型（CSS2）
在 MDN 上框对齐

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

为什么 W3C 盒子模型被认为更好？

模板简介：该模板名称为【如何使用 CSS 将元素水平居中？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

如何使用 CSS 将 元素 水平居中？

旧盒子模型（已弃用）

带有弹性盒的现代盒子模型

阅读有关使子元素居中的详细信息

如何使用 CSS 将元素水平居中？