如何在HTML中使div居中对齐

Question

如何在HTML中使div居中对齐

80

可能重复：
如何水平居中一个 div？

在 HTML 中将一个对象居中的一种简单方法是使用align='center'，但它对于一个div不起作用。

我尝试了：

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

我甚至用了一个居中标签

<center>

但我无法使目标 div 居中。

- Mac Taylor

1

你是想让 div 元素本身居中，还是想让 div 内的文本居中？ - Welbog

我在问题中说的是一个div，而不是它的文本。谢谢。 - Mac Taylor

2

设置 div 的宽度，然后使用 margin: 0 auto;：http://jsfiddle.net/spikey/FLL5Z/ - uSeRnAmEhAhAhAhAhA

请注意，margin: 0 auto; 解决方案仅适用于顶部和底部边框需要为0的情况。如果它们需要更改，则完整版本为 margin: 0 auto 0 auto; 其中第一个“0”是顶部，第二个“0”是底部。这也可以写成 margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto。 - Sam Denton

你可以使用 flexbox 来轻松居中任何元素。对于 x 轴，只需设置 justify-content: center；对于 y 轴，您可以设置 align-items: center;。要使一个 div 完全居中，请同时使用这两个属性！（针对父元素） - Appy Sharma

4个回答

15

我认为align="center"属性将内容居中，因此如果您想使用该方法，您需要在一个'包装器' div 中使用它 - 一个只是包裹其余部分的div。

text-align也有类似作用。

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

通常接受的方法是使用以下属性：

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

设置边距为auto意味着它们会自动增长/缩小以匹配浏览器窗口（或父DIV）。

更新

感谢Meo指出，如果您想的话，可以使用边距的简写属性来节省时间。

margin:0 auto;

这将顶部和底部定义为0（因为是零，所以缺少单位无关紧要），而左侧和右侧则被定义为“auto”。然后，您可以像处理其他CSS规则一样覆盖顶部边距。

- thecoshman

你可以使用内联样式来设置边距。margin: 0 auto; - meo

问题是IE无法将div准确居中显示；我尝试了margin-left-right：auto，但在IE上没有效果。 - Mac Taylor

@meo 说得对。通常最好采纳你的建议，因为它有助于减小文件大小，虽然不是很明显，但每一点都有帮助。不过对于指南来说，它有助于解释如何使其工作所需的属性。 - thecoshman

1

@Mac Taylor - 这可能与没有'margin-left-right'属性有关。您必须先定义左边，然后再定义右边，或者像meo建议的那样做。 - thecoshman

我刚试着打得更快，我知道这样的属性不存在！ - Mac Taylor

从经验来看，我可以向您保证margin:auto在IE6+中完美运行。然而...如果您没有正确配置HTML页面的文档类型，则IE会忽略它。这也可能是容器定义方式的问题。 - salgiza

1

这取决于你的 div 是否处于 position: absolute / fixed 或 relative / static 位置。

对于 position: absolute & fixed：

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

对于这两种技术，设置宽度非常重要。

- meo

-1

这样的话怎么样？

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

- erik

2

这不适用于其他浏览器或标准模式，因为自动边距需要与宽度相同的元素上。 - bobince

在 Quirks 模式以外的模式下，它对我来说运行良好，我不理解为什么会被不断地踩。 - erik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tower · Accepted Answer

<!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设置(left和right)值为auto时，其他浏览器(及IE9?)将工作。"0 auto"是"0 auto 0 auto"（上右下左）的缩写。

注意：内部DIV中的文本也被居中对齐。如果您希望保持文本居左，请为内部DIV指定"text-align: left;"。

编辑：运行于标准模式下的IE 6、7、8和9将使用设置为自动的margin。