CSS居中技巧
我最喜欢的仅使用CSS将xhtml元素居中的公式如下：
display: block; position: absolute; width: _insert width here_; left: 50%; margin-left: _insert width divided by two & multiplied by negative one here_
支持它的浏览器中还有一个更简单的margin：auto方法。还有其他人有巧妙的方法来强制内容在其容器中居中显示吗？ (垂直居中的加分点)
编辑哎呀，在左边距中忘记了其中一个的"负"部分。固定的。
解决方案
我不得不说，这似乎是过大的杀伤力。对于旧的浏览器，我倾向于将容器设置为text-align：center;，对于现代的浏览器，将容器设置为'margin：auto;`，然后将其保留为这样。然后重置元素中的text-align(如果它包含文本)。
当然，有些东西需要设置为块，而宽度需要设置...但是，我们到底想尝试设置需要大量修改的样式吗？
<div style="text-align:center">
<div style="width:30px; margin:auto; text-align:left">
<!-- this div is sitting in the middle of the other -->
</div>
</div>
div #centered{
margin: 0 auto;
}
根据我的经验，这似乎是最可靠的。
只要我们确保IE处于标准模式，Margin：auto就可以在所有浏览器中使用。
它比其他文档更挑剔，并且要求doctype必须是文档中的第一个文档，这意味着文档之前不能有空格(空格，制表符或者换行符)。
如果这样做，margin：auto是必经之路！ :)
请注意，margin：auto;仅当浏览器可以计算要居中的项目的宽度和父容器的宽度时，此方法才有效。在许多情况下，设置width：auto;有效，但在某些情况下则无效。
使用50％方法的绝对定位会产生严重的副作用，即如果浏览器窗口较窄，则该元素会导致某些内容出现在浏览器的左侧，而无法滚动到该内容。
坚持自动保证金，他们要可靠得多。
如果我们在"标准"模式下工作(应该使用)，那么我们可能会在意的所有浏览器都支持它们。
如果确实需要支持Internet Explorer 5.5及更早版本，则可以使用text-align hack。
试试这个;不知道它是否可以在IE中使用，但是在Fx中可以正常使用。它仅使用CSS(没有JavaScript)在DIV块居中放置页面(没有JavaScript)，没有margin-auto，并且DIV块中的文本仍然保持对齐。我只是想找出垂直居中是否也可以那样工作，但到目前为止还没有成功。
<html>
<head>
<title>Center Example</title>
<style>
.center {
clear:both;
width:100%;
overflow:hidden;
position:relative;
}
.center .helper {
float:left;
position:relative;
left:50%;
}
.center .helper .content {
float:left;
position:relative;
right:50%;
border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
<div class="helper">
<div class="content">Centered on the page<br>and left aligned!</div>
</div>
</div>
</body>
</html>
坚持保证金：0自动；用于水平对齐；
如果还需要垂直对齐，请使用position：absolute;最高：50％；边距顶部：-(width / 2)px;但是请注意，如果容器的宽度大于屏幕的宽度，则使用"位置：绝对"方法，容器的一部分将从屏幕的左侧掉落。
这是CSS技巧的便捷书签
http://css-discuss.incutio.com/
也包含许多居中技巧。
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
在所有常用的浏览器中都可以很好地工作。如前所述，margin：0 auto;不适用于所有半当前版本的IE。
