Question

我最喜欢的仅使用CSS来居中xhtml元素的等式如下：

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

还有更简单的边距：支持它的浏览器中的自动方法。有没有其他人有强大的方法来强制内容显示在其容器中心？（垂直居中的奖励积分）

编辑 - 哎呀，忘了边缘左边的'负面'部分。固定的。

Answer 1

div #centered{
 margin: 0 auto;
}

根据我的经验，

似乎是最可靠的。

Answer 2

坚持保证金：0自动;用于水平对齐; 如果你需要垂直对齐以及使用position：absolute;最高：50％; margin-top： - （width / 2）px;但请注意，如果您的容器的宽度大于屏幕宽度，则部分容器将使用Position：absolute方法从左侧的屏幕上掉落。

Answer 3

嗯，这似乎是大规模的矫枉过正，我必须说。对于旧浏览器，我倾向于将容器设置为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>

Answer 4

保证金：只要您确保IE处于标准模式，自动适用于所有浏览器。

它比其他人更挑剔，要求你的doctype是你文档中的第一个，这意味着它之前没有空格（空格，制表符或换行符）。

如果你这样做，保证金：auto是要走的路！：）

Answer 5

只是注意到保证金：自动;方法仅在浏览器可以计算要居中的项目的宽度和父容器的宽度时才有效。在很多情况下设置宽度：auto;是有效的，但在某些情况下却没有。

Answer 6

使用50％方法的绝对定位具有严重的副作用，如果浏览器窗口比元素更窄，那么一些内容将出现在浏览器的左侧 - 无法滚动到它。

坚持自动保证金 - 它们更可靠。

如果您在标准模式下工作（您应该这样做），那么您可能会关注的所有浏览器都支持它们。

如果您确实需要支持Internet Explorer 5.5及更早版本，则可以使用text-align hack。

Answer 7

这是CSS技巧的便利书签

http://css-discuss.incutio.com/

也包含lots of centering个技巧。

Answer 8

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

这适用于所有常用浏览器。如前所述，margin: 0 auto;不适用于IE的所有半当前版本。

Answer 9

试试这个;不知道它是否适用于IE，但在Fx中工作正常。它使用CSS（无JavaScript）在页面上居中DIV块，没有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>

CSS中心技巧

9 个答案: