使用 CSS 跨浏览器 div 居中对齐
Posted
技术标签:
【中文标题】使用 CSS 跨浏览器 div 居中对齐【英文标题】：Cross browser div center alignment using CSS 【发布时间】：2011-02-25 11:56:08 【问题描述】：使用 CSS 水平和垂直对齐位置为 relative 的 div 的最简单方法是什么？ div 的宽度和高度未知，即它应该适用于每个 div 维度和所有主要浏览器。我的意思是居中对齐。
我想使用以下方法进行水平对齐：
margin-left: auto;
margin-right: auto;
就像我做的那样here。
这是一个很好的水平对齐跨浏览器解决方案吗？
我怎样才能做到垂直对齐？
【问题讨论】：
当您说对齐时，并不清楚您希望对齐 div 的内容。你的意思是让 div 居中吗？ 你的意思是让div居中垂直对齐 抱歉，我的意思是居中对齐。 另见***.com/questions/1909753/… 【参考方案1】：只有当元素的width 已知时，水平居中才可能，否则浏览器无法确定从哪里开始和结束。
#content
width: 300px;
margin: 0 auto;
这是完美的跨浏览器兼容。
只有当元素被绝对定位并且有一个已知的height 时，垂直居中才是可能的。但是，绝对定位会破坏margin: 0 auto;，因此您需要以不同的方式处理此问题。您需要将其top 和left 设置为50%，并将margin-top 和margin-left 分别设置为其width 和height 的负半部分。
这是一个复制'n'粘贴'n'可运行的例子：
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
也就是说，垂直居中通常很少应用在现实世界中。
如果事先真的不知道宽度和高度，那么您需要使用 javascript/jQuery 来设置 margin-left 和 margin-top 值，并接受客户端会在页面期间看到 div 快速移动的事实负载，这可能会导致“wtf？”经验。
【讨论】：
请注意，您必须在标准模式下运行 IE 才能使其工作（在 Quirks 模式下，您必须在父元素上使用text-align: center 以使 div 水平居中）。
Quirks 模式从来都不是现代网页的选项，因此不值得考虑。
@Rob：虽然我讨厌为此发起一场激烈的战争（没有人死于 Quirks 模式），但我曾经不得不在 Web 应用程序中使用 Quirks 模式才能在 IE 中使用 border-box box model。
@Marcel：然后应该将 div 设置为 display: inline，因为 text-align 仅适用于 inline 元素。另见this answer。事实上，你不想让它在怪癖模式下运行。没有理由这样做。
如果您认为从不有理由恢复到 quirks 模式，您将如何在不使用 CSS 表达式（当然也不使用框架）的情况下解决 this 问题？ 【参考方案2】：
“只有当元素被绝对定位并且具有已知高度时，垂直居中才可能。” – 这个说法并不完全正确。
您可以尝试使用display:inline-block;，它可以在其父框内垂直对齐。这种技术允许您在不知道元素高度和宽度的情况下对齐元素，尽管它至少需要您知道父元素的高度。
如果你的 HTML 是这样的；
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
你的 CSS 是：
#container
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
#aligned-middle
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut
/* parent's height */
height:300px;
.inline-block
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
然后#aligned-middle 将在#container 中居中。这是该技术最简单的用法，但熟悉起来也不错。
标有“/* for IE
你可以在这里查看一个工作示例：http://jsfiddle.net/UXKcA/3/
编辑：（这个特殊的 sn-p 在 ie6 和 ff3.6 中测试过，但我经常使用它，它非常适合跨浏览器。如果您需要对 ff display:inline-block; 内.inline-block 规则下。）
【讨论】：
【参考方案3】：检查这个Demo jsFiddle
设置以下两个东西
HTML align 属性值 center
CSS margin-left 和 margin-right 属性值设置 auto
CSS
<style type="text/css">
#setcenter
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
【讨论】：
【参考方案4】："如果事先真的不知道宽度和高度，那么您将 需要抓取 Javascript/jQuery 来设置 margin-left 和 margin-top 价值观并接受客户将很快看到 div 的事实 在页面加载期间移动，这可能会导致“wtf?”经验。”
您可以在 DOM 准备好时 .hide() div，等待页面加载，设置 div margin-left 和 margin-top 值，然后再次 .show() div。
$(function()
$("#content").hide();
);
$(window).bind("load", function()
$("#content").getDimSetMargins();
$("#content").show();
);
【讨论】：
不好的做法，但是如果已经准备好了，请将其隐藏在 css 中，并且仅在加载 jq 时显示。以上是关于使用 CSS 跨浏览器 div 居中对齐的主要内容，如果未能解决你的问题，请参考以下文章
CSS 跨浏览器自动垂直/水平居中（Chrome和表格兼容）