如何在 HTML 中使 div 居中对齐 [重复]答案

【问题标题】：How to make a div center align in HTML [duplicate]如何在 HTML 中使 div 居中对齐 [重复]
【发布时间】：2011-02-11 01:56:56
【问题描述】：

可能重复：
How to horizontally center a div?

使对象以 HTML 为中心的一种简单方法是使用 align='center'，但它不适用于 div。

我试过了：

style='text-align:center';
style='left:50%';

我什至是一个中心标签

<center>

但我不能让我的目标 div 成为中心。

【问题讨论】：

你是想让 div 本身居中，还是让 div 中的文本居中？
我在我的问题中说的是一个 div 而不是它的文本。谢谢
设置div的宽度，然后使用margin: 0 auto;：jsfiddle.net/spikey/FLL5Z
请注意，边距：0 auto;解决方案仅在上下边框需要为 0 时才有效。如果需要更改，则完整版本为 margin: 0 auto 0 auto;第一个“0”是顶部，第二个“0”是底部。这也可以写为 margin-top: 0;边距右：自动；边距底部：0；左边距：自动。
让任何东西居中的简单方法也是使用 flexbox。对于 x 轴，只需设置 justify-content: center，对于 y 轴，您可以设置 align-items: center;。要在中间中心完全创建一个 div，请同时使用！（对于父元素）

标签： html css

【解决方案1】：

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>

在 IE、Firefox、Chrome、Safari 和 Opera 中测试和工作。我没有测试IE6。 IE 需要外部文本对齐。当您将 DIV 边距（左右）值设置为 auto 时，其他浏览器（和 IE9？）将工作。边距“0 auto”是边距“0 auto 0 auto”的简写（右上角左下角）。

注意：文本也在内部 DIV 中居中，如果您希望它保持在左侧，只需指定 text-align: left;对于内部 DIV。

编辑：在标准模式下运行的 IE 6、7、8 和 9 将在边距设置为自动的情况下工作。

【讨论】：

@Mac：这种技术适用于百分比宽度。但是，通常要使自动保证金工作，您必须处于标准模式，为此您需要适当的<!DOCTYPE 声明。 parent-text-align-center 解决方法适用于 Quirks 模式，但您今天绝对不想在 Quirks 模式下写任何东西。
你需要用另一个div包裹你的div，并将外部div的样式设置为IE的text-align
仅仅写一个解决方案并不能帮助人们学习。您应该尝试教书，而不是快速摆脱人们。
回复：“IE 需要外部文本对齐。” — 适用于 IE 5.5 及更早版本！在 IE6 标准模式中添加了对自动边距的支持！
@thecoshman：课程和书籍用于教学。 Stack Overflow 是为了解答。

【解决方案2】：

这些方面的东西怎么样

<style type="text/css">
  #container {
    margin: 0 auto;
    text-align: center; /* for IE */
  }

  #yourdiv {
    width: 400px;
    border: 1px solid #000;
  }
</style>

....

<div id="container">
  <div id="yourdiv">
    weee
  </div>
</div>

【讨论】：

这不适用于其他浏览器或标准模式，因为自动边距需要与宽度位于同一元素上。
它在 Quirks 以外的模式下对我来说效果很好，我不明白持续的投票否决

【解决方案3】：

我认为align="center" 可以对齐内容，因此如果您想使用该方法，则需要在“包装器”div 中使用它 - 一个仅包装其余部分的 div。

text-align 正在做类似的事情。

left:50% 将被忽略，除非您将 div 的位置设置为相对或绝对位置。

普遍接受的方法是使用以下属性

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

自动边距意味着它们会增长/缩小以匹配浏览器窗口（或父 div）

更新

感谢 Meo 指出这一点，如果您愿意，可以节省时间并使用简写属性作为边距。

margin:0 auto;

这将顶部和底部定义为 0（因为它是零，所以缺少单位无关紧要）并且左侧和右侧被定义为“自动”然后你可以，如果你不想覆盖说上边距就像使用任何其他 CSS 规则一样。

【讨论】：

你可以使用内联样式作为边距.. margin: 0 auto;
问题是 IE 不能完全居中显示 div ；我试过 margin-left-right : auto 但在 IE 上不起作用
@meo 公平点。通常最好听取您的建议，因为它有助于减小文件大小，我知道的不多，但每一点都有帮助。虽然对于指南来说，它有助于解释使其工作的“必需”属性。
@Mac Taylor - 这可能与没有“margin-left-right”属性的事实有关。你必须先定义左边，然后再定义右边，或者像 meo 建议的那样做。
我只是想快速打字，我知道没有这样的属性！呃

【解决方案4】：

这取决于您的 div 是否在位置：绝对/固定或相对/静态

对于位置：绝对和固定

<div style="position: absolute; /*or fixed*/;
width: 50%;
height: 300px;
left: 50%;
top:100px;
margin: 0 0 0 -25%">blblablbalba</div>

这里的技巧是在对象宽度的一半处设置负边距

对于位置：相对和静态

<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>

对于这两种技术，都必须设置宽度。

【讨论】：