水平居中对齐块元素

我想很多像我一样的人一直这样做：

html {
    text-align: center;
}
body {
    margin: 0 auto;
    width: 80%;
    text-align: left;
}

http://jsfiddle.net/ofpy7mgz/

我甚至不记得为什么我们在父元素中添加text-align: center;，一定是为了浏览器兼容性？好吧，现在就放弃它安全吗？

编辑：目标只是居中对齐<body>元素，而不是任何文本对齐等。

因为IE6（以及旧版本+我认为IE7处于怪癖模式）以这种方式集中了所有元素（block和inline），所以margin: auto在那里不起作用。

其他浏览器（non-IE）无法通过text-align: center;居中阻止元素。正如规范所说，他们使用text-align: center作为inline元素，margin: auto作为block元素。

如果你不想支持IE6，你可以删除它。

如果你想使用你的代码，更简单地说：

body {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}

<p>hello world.</p>

相关内容