使用 CSS 水平和垂直对齐位置为 relative 的 div 的最简单方法是什么？ div 的宽度和高度未知，即它应该适用于每个 div 维度和所有主要浏览器。我的意思是居中对齐。
我想使用以下方法进行水平对齐：
margin-left: auto;
margin-right: auto;
就像我做的那样here。
这是一个很好的水平对齐跨浏览器解决方案吗？
我怎样才能做到垂直对齐？
【问题讨论】：
标签： javascript jquery html css alignment
只有当元素的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？”经验。
【讨论】：
text-align: center 以使 div 水平居中）。
display: inline，因为 text-align 仅适用于 inline 元素。另见this answer。事实上，你不想让它在怪癖模式下运行。没有理由这样做。
“只有当元素被绝对定位并且具有已知高度时，垂直居中才可能。” – 这个说法并不完全正确。
您可以尝试使用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 规则下。）
【讨论】：
检查这个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>
【讨论】：
"如果事先真的不知道宽度和高度，那么您将 需要抓取 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();
});
【讨论】：