如何在 HTML 中使一个 div 中心对齐

可能的复制品:
如何水平居中一个 div

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

我试过:

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

我甚至还真有个中心标签

<center>

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

198057 次浏览
小开
最佳答案 

<!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 需要外部的文本对齐。其他浏览器(和 IE9?)当您给出 auto 的 DIV 边距(左边距和右边距)值时，它将工作。页边距“0 auto”是页边距“0 auto 0 auto”的简写(左上右下)。

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

编辑: IE6,7,8和9在标准模式下运行，边距设置为自动。

小开

这么说怎么样

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

我认为 align="center"对齐了内容，所以如果你想使用这个方法，你需要在一个‘ wraper’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;

边距是自动的意味着它们增长/缩小以匹配浏览器窗口(或父 div)

更新

感谢 Meo 指出了这一点，如果你想，你可以节省时间，并使用短手属性的边缘。

margin:0 auto;

这里将顶部和底部定义为0(因为它是0，所以单位不多也没关系) ，左边和右边定义为“ auto”，如果你不想覆盖，可以像其他 CSS 规则那样定义顶部边距。

小开

它取决于 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>

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


提交答案