CSS居中技巧
Posted
技术标签:
【中文标题】CSS居中技巧【英文标题】：CSS centering tricks [closed] 【发布时间】：2010-09-13 23:28:08 【问题描述】：我最喜欢的仅使用 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 方法。是否有其他人有巧妙的方法来强制内容在其容器中居中显示？ （垂直居中加分）
编辑 - 哎呀，忘记了左侧边距中的“负”部分。固定。
【问题讨论】：
另外，left 是 width/2 - 它是如何居中的？如果我还有选票，我会投票 margin:auto;这是最可靠的。 为什么在底部乘以一？ 哎呀，对不起。应该是负数。固定。 哦，直到 - 你将它向右移动 50%，然后再次向左移动 1/2 宽度，使其居中。想一想，或者画出来，你会明白的。 【参考方案1】：div #centered
margin: 0 auto;
根据我的经验，似乎是最可靠的。
【讨论】：
实际上只适用于大多数最新的浏览器。几乎任何版本，但最新的 IE 将无法正确处理，甚至其他供应商的旧版本也会失败。此外，提问者已经提到了该解决方案，您为什么在回答中重复它？ 还要注意这个方法，它只适用于最上面的div层，不可能对divs inside divs inside divs使用相同的方法... 可能应该提到的是给包含元素 text-align:center;将有助于修复无法正确解释 margin:auto 的浏览器，但您必须明确地将 text-align 设置回您希望它在居中元素本身上的任何内容以抵消这种情况。【参考方案2】：坚持边距：0自动；用于水平对齐； 如果您还需要垂直对齐，请使用 position: absolute;最高：50%；边距顶部：-（宽度/ 2）像素；但是请注意，如果您的容器的宽度大于屏幕的宽度，则使用 Position: absolute 方法，它的一部分将在左侧从屏幕上脱落。
【讨论】：
什么？像 ???? 否，例如：【参考方案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>
【讨论】：
这个等式非常适合 position:absolute，不过 - 除了已经提到的方法之外，您还能想到其他方法吗？【参考方案4】：只要您确保 IE 处于标准模式，Margin:auto 就可以在所有浏览器中使用。
它比其他的更挑剔，并且要求您的文档类型是文档中的第一个，这意味着它之前没有空格（空格、制表符或换行符）。
如果您这样做，margin:auto 就是您的最佳选择！ :)
【讨论】：
另外，如果您使用 XHTML 并使用 XML 声明，IE 会阻塞。【参考方案5】：请注意，margin:auto;仅当浏览器可以计算要居中的项目的宽度和父容器的宽度时，该方法才有效。在许多情况下设置宽度：自动；有效，但在某些情况下无效。
【讨论】：
【参考方案6】：这是一个方便的 CSS 技巧书签
http://css-discuss.incutio.com/
也包含lotsofcentering技巧。
【讨论】：
【参考方案7】：使用 50% 方法的绝对定位具有严重的副作用，如果浏览器窗口比元素窄，那么某些内容将出现在浏览器的左侧 - 无法滚动到它。
坚持自动边距 - 它们更可靠。
如果您在标准模式下工作（您应该这样做），那么您可能关心的所有浏览器都支持它们。
如果您确实需要支持 Internet Explorer 5.5 及更早版本，可以使用 text-align hack。
【讨论】：
【参考方案8】：body
text-align: center;
#container
width: 770px;
margin: 0 auto;
text-align: left;
这在所有常用的浏览器中都能很好地工作。如前所述，margin: 0 auto; 并不适用于所有 IE 的半当前版本。
【讨论】：
【参考方案9】：试试这个；不知道它是否在 IE 中工作，但在 Fx 中工作正常。它仅使用 CSS（无 javascript）在页面上居中 DIV 块，没有自动边距，并且 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>
【讨论】：
嗯，太汤了 - 额外的“助手”和“中心”div 不会添加任何语义值。这就是我们试图摆脱的——xhtml 用于内容标记，而不是内容布局。以上是关于CSS居中技巧的主要内容，如果未能解决你的问题，请参考以下文章