【问题标题】：How can I horizontally center an element?如何水平居中元素？
【发布时间】：2022-08-10 08:26:06
【问题描述】：

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

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

在这些很棒的答案中，我只想强调你必须给 \"#inner\" 一个 \"width\"，否则它将是 \"100%\"，而你无法判断它是否是已经居中。
display:flex; 是最容易记住的（Chrome 在 DevTools 中为您提供指南）并支持在两个轴上居中。

标签： html css alignment centering

【解决方案1】：

您可以将此 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>

编辑

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

【讨论】：

对于垂直居中，我通常使用“line-height”（line-height == height）。这既简单又好，但它只适用于单行内容文本:)
您必须在 html 页面上使用 !DOCTYPE 标记才能使其在 IE 上正常工作。
请注意，可能需要添加“float:none;”对于#inner。
您还将顶部和底部边距设置为 0，这是不相关的。最好把margin-left: auto; margin-right: auto 我想。
不一定是margin:0 auto：可以是margin: <whatever_vertical_margin_you_need> auto，第二个是水平边距。

【解决方案2】：

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

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

#inner {
  display: inline-block;
}

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

这使得内部div 成为一个可以以text-align 为中心的内联元素。

【讨论】：

@SabaAhang 正确的语法是 float: none; 并且可能只需要因为 #inner 从 CSS 中的其他位置继承了 float 或 left 或 right。
这是一个很好的解决方案。请记住，inner 将继承 text-align，因此您可能希望将 inner 的 text-align 设置为 initial 或其他值。

【解决方案3】：

最好的方法是使用 CSS3。

旧盒子模型（已弃用）

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 属性。

带有 Flexbox 的现代盒子模型

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

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

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

Why is the W3C box model considered better?

【讨论】：

到目前为止，Safari 仍然需要 -webkit flexbox 标志（display: -webkit-flex; 和 -webkit-align-items: center; 和 -webkit-justify-content: center;）
我一直认为使用很多代码是不好的做法，例如使用此代码我将 div 居中： display: table;边距：自动；简单易行

【解决方案4】：

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

确保父元素是positioned，即相对、固定、绝对或粘性。

如果不知道 div 的宽度，可以使用 transform:translateX(-50%); 代替负边距。

使用CSS calc()，代码可以变得更加简单：

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原理还是一样的；将物品放在中间并补偿宽度。

【讨论】：

我不喜欢这种解决方案，因为当内部元素对于屏幕来说太宽时，您无法水平滚动整个元素。 margin: 0 auto 效果更好。
左边距：自动；边距右：自动；将块级元素居中
大多数块级元素的默认宽度是自动的，它填充屏幕上的可用区域。只是居中将其放置在与左对齐相同的位置。如果您希望它在视觉上居中，您应该设置一个宽度（或一个最大宽度，尽管 Internet Explorer 6 和更早版本不支持此功能，IE 7 仅在标准模式下支持它）。

【解决方案5】：

我创建了this example 来展示如何垂直和水平align。

代码基本上是这样的：

#outer {
 position: relative;
}

和...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

它会留在center，即使你调整大小你的屏幕。

【讨论】：

对于这种方法+1，我正要回答它。请注意，您必须在要水平居中的元素上声明一个宽度（如果垂直居中，则为高度）。这是一个全面的解释：codepen.io/shshaw/full/gEiDt。垂直和/或水平居中元素的更通用和广泛支持的方法之一。
您不能在 div 中使用填充，但如果您想产生错觉，请使用相同颜色的边框。

【解决方案6】：

一些发帖人提到了使用 display:box 居中的 CSS 3 方式。

此语法已过时，不应再使用。 [另见this post]。

因此，为了完整起见，这里是使用 CSS 3 居中的最新方法Flexible Box Layout Module.

因此，如果您有简单的标记，例如：

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...并且您想将您的项目集中在框中，这是您在父元素 (.box) 上需要的内容：

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果您需要支持使用旧语法的旧版浏览器 flexbox here's 一个好地方。

【讨论】：

“语法已过时”是什么意思，是否已弃用？
Flexbox 规范经历了 3 次重大修订。最新的草稿来自 2012 年 9 月，正式弃用了所有以前的草稿。但是，浏览器支持参差不齐（尤其是旧的 Android 浏览器）：stackoverflow.com/questions/15662578/…
不是“justify-content: center;”吗？用于垂直对齐和“对齐项目：中心；”水平对齐？
@WouterVanherck 它取决于 flex-direction 值。如果它是“行”（默认值）-那么justify-content: center; 用于水平对齐（就像我在答案中提到的那样）如果它是“列”-那么justify-content: center; 用于垂直对齐。

【解决方案7】：

如果您不想设置固定宽度并且不想要额外的边距，请将display: inline-block 添加到您的元素中。

您可以使用：

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

【讨论】：

我也用过这个，但我以前从未遇到过display: table;。它有什么作用？

【解决方案8】：

将未知高度和宽度的 div 居中

水平和垂直。它适用于相当现代的浏览器（Firefox、Safari/WebKit、Chrome、Internet & Explorer & 10、Opera 等）

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

&lt;div class="content"&gt;This works with any content&lt;/div&gt;

在Codepen 或JSBin 上进一步修改它。

【讨论】：

这是唯一适用于完美居中的方法，即使在 div 中的内容被修改后仍将保持居中。
这是一个不错的技巧，但有一点需要注意。如果元素的内联内容比父元素宽度的 50% 宽，那么从 left 额外的 50% 偏移量将推断父元素的宽度，将内容分解到下一行以避免溢出。但是可以通过在居中的元素中将white-space 属性设置为nowrap 来保持内容内联。试试这个JSFiddle。

【解决方案9】：

设置width 并将margin-left 和margin-right 设置为auto。那是仅用于水平，尽管。如果你想要两种方式，你就两种方式都做。不要害怕尝试；这不像你会破坏任何东西。

【讨论】：

【解决方案10】：

如果你不给它一个宽度，它就不能居中。否则，默认情况下，它将占用整个水平空间。

【讨论】：

如果你不知道宽度？说因为内容是动态的？
最大宽度？那个怎么样？
我使用width: fit-content; 和margin: 0 auto。我认为这可以在未知宽度下工作。
瑞克的答案是最好的

【解决方案11】：

CSS 3's box-align property

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

【讨论】：

它现在已被 flexbox 取代，因此不再推荐 - 仍然值得为我投票！

【解决方案12】：

我通常这样做的方式是使用绝对位置：

#inner{
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

外部 div 不需要任何额外的属性来工作。

【讨论】：

如果您在居中的 div 下方有其他 div，这可能不起作用。

【解决方案13】：

我最近不得不将一个“隐藏”div（即display:none;）居中，其中有一个表格形式，需要在页面上居中。我编写了以下 jQuery 代码来显示隐藏的 div，然后将 CSS 内容更新为自动生成的表格宽度并将边距更改为居中。（显示切换是通过单击链接触发的，但此代码不是显示所必需的。）

笔记：我正在分享这段代码，因为谷歌把我带到了这个 Stack Overflow 解决方案，除了隐藏元素没有任何宽度并且在它们显示之前不能调整大小/居中之外，一切都会正常工作。

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

【讨论】：

【解决方案14】：

对于 Firefox 和 Chrome：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

对于 Internet Explorer、Firefox 和 Chrome：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align: 属性对于现代浏览器是可选的，但在 Internet Explorer Quirks Mode 中对于旧版浏览器支持是必需的。

【讨论】：

text-align 实际上是它在 IE 快速模式下工作所必需的，所以如果你不介意添加一个小表达式来支持旧版浏览器，请保留它。（带有 IE8 规则的 IE8 和 IE7 规则都可以在没有 text-align 的情况下工作，所以可能只有 IE6 和更早的版本才关心）

【解决方案15】：

利用：

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

【讨论】：

【解决方案16】：

无需为其中一个元素设置宽度的另一种解决方案是使用 CSS 3 transform 属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

诀窍是translateX(-50%) 将#inner 元素设置在其自身宽度左侧的50%。您可以使用相同的技巧进行垂直对齐。

这是一个Fiddle 显示水平和垂直对齐。

更多信息请访问Mozilla Developer Network。

【讨论】：

可能还需要供应商前缀：-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);

【解决方案17】：

Chris Coyier 在他的博客上写了一个excellent post 关于“以未知为中心”的文章。这是多种解决方案的综合。我发布了一个未在此问题中发布的内容。它比Flexbox 解决方案具有更多的浏览器支持，而且您没有使用display: table;，这可能会破坏其他东西。

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

【讨论】：

【解决方案18】：

我最近找到了一种方法：

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

两个元素必须具有相同的宽度才能正常工作。

【讨论】：

只需为#inner 设置此规则：#inner { position:relative; left:50%; transform:translateX(-50%); }。这适用于任何宽度。

【解决方案19】：

例如，请参阅this link 和下面的 sn-p：

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

如果您的父母下有很多孩子，那么您的 CSS 内容必须是这样的example on fiddle。

HTML 内容如下所示：

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

然后看到这个example on fiddle。

【讨论】：

【解决方案20】：

仅水平居中

以我的经验，将盒子水平居中的最佳方法是应用以下属性：

容器：

应该有text-align: center;

内容框：

应该有display: inline-block;

演示：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

另见this Fiddle！

水平和垂直居中

以我的经验，将盒子居中的最佳方法两个都垂直和水平是使用额外的容器并应用以下属性：

外容器：

应该有display: table;

内部容器：

应该有display: table-cell;
应该有vertical-align: middle;
应该有text-align: center;

内容框：

应该有display: inline-block;

演示：

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

另见this Fiddle！

【讨论】：

【解决方案21】：

弹性盒

display: flex 的行为类似于块元素，并根据 flexbox 模型布置其内容。它适用于justify-content: center。

请注意：Flexbox 兼容除 Internet Explorer 之外的所有浏览器。有关浏览器兼容性的完整和最新列表，请参阅 display: flex not working on Internet Explorer。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

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

文本对齐：居中

应用text-align: center 内联内容在行框中居中。但是，由于内部 div 默认具有width: 100%，因此您必须设置特定宽度或使用以下之一：

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

保证金：0自动

使用margin: 0 auto 是另一种选择，它更适合旧版浏览器的兼容性。它与display: table 一起工作。

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

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

转换

transform: translate 允许您修改 CSS 视觉格式化模型的坐标空间。使用它，可以平移、旋转、缩放和倾斜元素。要水平居中，它需要position: absolute 和left: 50%。

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

`<center>`（已弃用）

标签<center> 是text-align: center 的HTML 替代品。它适用于旧浏览器和大多数新浏览器，但由于此功能为 obsolete 并且已从 Web 标准中删除，因此不被认为是一种好的做法。

#inner {
  display: inline-block;
}

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

【讨论】：

【解决方案22】：

此方法也可以正常工作：

div.container {
  display: flex;
  justify-content: center; /* For horizontal alignment */
  align-items: center;     /* For vertical alignment   */
}

对于内部<div>，唯一的条件是它的height 和width 不能大于它的容器。

【讨论】：

关于编辑记录，此人在页面上首先回答。赞成。

【解决方案23】：

最简单的方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

【讨论】：

正如您的小提琴所指出的，#inner 必须设置一个宽度。
#outer 不需要任何 width:100%;，因为默认情况下 <div> 总是有 width:100%。并且text-align:center 也根本不需要。

【解决方案24】：

如果内容的宽度未知，您可以使用以下方法.假设我们有这两个元素：

.outer -- 全宽
.inner -- 没有设置宽度（但可以指定最大宽度）

假设计算出的元素宽度分别为 1000 像素和 300 像素。进行如下操作：

将.inner 包裹在.center-helper 内
使.center-helper 成为内联块；它的大小与.inner 相同，使其宽度为 300 像素。
将.center-helper 相对于其父项向右推50%；这将其左侧放置在 500 像素处。外。
将.inner 相对于其父级向左推50%；这将其左侧放置在 -150 像素处。中心助手，这意味着它的左边是 500 - 150 = 350 像素 wrt。外。

将.outer 上的溢出设置为隐藏以防止水平滚动条。

演示：

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案25】：

Flex 拥有超过 97% 的浏览器支持覆盖率，并且可能是在几行内解决此类问题的最佳方法：

#outer {
  display: flex;
  justify-content: center;
}

【讨论】：

【解决方案26】：

你可以做这样的事情

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

这也将垂直对齐#inner。如果您不想这样做，请删除 display 和 vertical-align 属性；

【讨论】：

【解决方案27】：

这是你想要的最短的方式。

JSFIDDLE

#outer {
  margin - top: 100 px;
  height: 500 px; /* you can set whatever you want */
  border: 1 px solid# ccc;
}

#inner {
  border: 1 px solid# f00;
  position: relative;
  top: 50 % ;
  transform: translateY(-50 % );
}

【讨论】：

它垂直居中。

【解决方案28】：

您可以将display: flex 用于您的外部div，并且要水平居中您必须添加justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

或者您可以访问w3schools - CSS flex Property 了解更多想法。

【讨论】：

【解决方案29】：

好吧，我设法找到了一个可能适合所有情况的解决方案，但使用 JavaScript：

这是结构：

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

这是 JavaScript sn-p：

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

如果您想在响应式方法中使用它，您可以添加以下内容：

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

【讨论】：

【解决方案30】：

我发现存在一个选项：

每个人都说使用：

margin: auto 0;

但还有另一种选择。为父 div 设置此属性。它随时随地完美运行：

text-align: center;

看，孩子去中心。

最后为您提供 CSS：

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

【讨论】：

text-align 用于其容器中的文本对齐，而不是用于其容器与其父级的对齐。
我测试它，我将孩子设置为中心的问题，当你有更多的孩子时，必须有更多的边距：0自动字体答案，但是，文本对齐中心，对于父母来说，让这个孩子成为中心，即使他们是元素和不是文字，测试看看会发生什么
仅文本对齐中心文本。你现在是对的，但是当你编写一个包含不同宽度和颜色的孩子的容器 css 时，你的代码不起作用。再测试一次！！！！
看到这个例子jsfiddle.net/uCdPK/2，告诉我你怎么看！！！！！！

编辑

旧盒子模型（已弃用）

带有 Flexbox 的现代盒子模型

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

将未知高度和宽度的 div 居中

仅水平居中

容器：

内容框：

演示：

水平和垂直居中

外容器：

内部容器：

内容框：

演示：

弹性盒

文本对齐：居中

保证金：0自动

转换

&lt;center&gt;（已弃用）

`<center>`（已弃用）