html中box居中,css：如何将box div元素直接居中放置？

body { text-align: center; }

#box {

width: 500px; /* or whatever your width is */

margin: 10px auto;

text-align: left;

}

以上将在顶部和底部的中心水平居中你的盒子在页面上有一个10px的保证金(显然是顶部/底部边缘可以改变，以任何你想要的)。 IE上需要使用“文本对齐”，正如往常一样，它并不能完全消除它。然后你需要在你的盒子上左边的文本对齐(除非你想让文本居中)，以抵消身体上的文本对齐中心。

虽然试图垂直居中是几乎不可能的，但使用纯CSS。虽然在CSS中有一个垂直对齐方式，但它不像表格中的HTML垂直对齐方式那样工作，所以在CSS 2中没有像HTML一样的内置垂直对齐方式。问题是，你正在处理一个未知的高度 - 即使你知道你的盒子的高度，页面的高度是未知的，或者你试图修复盒子的中心位置？这一页？视口？根据屏幕分辨率和浏览器的不同，可见屏幕区域对于每个人都会有所不同，所有浏览器都会以不同方式解读高度。

有很多方法声称已经解决了这个问题，但通常它们不能在所有浏览器中可靠地工作。前些天我发现了this one，这看起来不错，但它在谷歌浏览器中不起作用(适用于Firefox和Opera，但我没有机会查看IE)。网站管理员世界上的this thread有一个有趣的讨论，总结了他们的各种方法和优缺点，值得一看。

编辑： 只要您(或该网站的访问者)不增加字体大小或行高度，Dav的第一个响应解决方案就可以正常工作。容器将居中，但一旦字体大小增加或添加了更多内容，容器就会溢出。