如何使 div 中心在 HTML 中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2691178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div center align in HTML
提问by Mac Taylor
Possible Duplicate:
How to horizontally center a div?
可能的重复：
如何将 div 水平居中？
One simple way to make an object centered in HTML is using align='center', but it's not working for a div.
使对象以 HTML 为中心的一种简单方法是使用 align='center'，但它不适用于 div。
I tried:
我试过：
style='text-align:center';
style='left:50%';
I even true a center tag
我什至是一个中心标签
<center>
But I can't make my target div to be center.
但我不能让我的目标 div 成为中心。
采纳答案by Tower
<!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>Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).
在 IE、Firefox、Chrome、Safari 和 Opera 中测试和工作。我没有测试IE6。IE 需要外部文本对齐。当您将 DIV 边距（左和右）设置为 auto 时，其他浏览器（和 IE9？）也能正常工作。Margin "0 auto" 是 margin "0 auto 0 auto"（左上右下）的简写。
Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.
注意：文本也在内部 DIV 内居中，如果您希望它保留在左侧，只需指定 text-align: left; 对于内部 DIV。
Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.
编辑：在标准模式下运行的 IE 6、7、8 和 9 将边距设置为自动。
回答by thecoshman
I think that the the align="center"aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.
我认为align="center"对齐内容，因此如果您想使用该方法，则需要在“包装器”div 中使用它 - 一个只包装其余部分的 div。
text-alignis doing a similar sort of thing.
text-align正在做类似的事情。
left:50%is ignored unless you set the div's position to be something like relative or absolute.
left:50%除非您将 div 的位置设置为相对或绝对位置，否则将被忽略。
The generally accepted methods is to use the following properties
普遍接受的方法是使用以下属性
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
the margins being auto means they grow/shrink to match the browser window (or parent div)
边距是自动意味着它们增长/缩小以匹配浏览器窗口（或父 div）
UPDATE
更新
Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.
感谢 Meo 指出这一点，如果您愿意，您可以节省时间并使用速记属性作为边距。
margin:0 auto;
this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.
这将顶部和底部定义为 0（因为它是零，所以缺少单位无关紧要）并且左右被定义为“自动”然后你可以，如果你不想覆盖说顶部边距，你会与任何其他 CSS 规则。
回答by meo
it depends if your div is in position: absolute / fixed or relative / static
这取决于您的 div 是否在位置：绝对/固定或相对/静态
for position: absolute & fixed
位置：绝对和固定
<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>
The trick here is to have a negative margin half the width of the object
这里的技巧是有一个负边距是对象宽度的一半
for position: relative & static
位置：相对和静态
<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>
for both techniques it is imperative to set de width
对于这两种技术，必须设置宽度
回答by the_e
how about something along these lines
怎么样？
<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>
