Question

使用CSS水平和垂直对齐div位置relative的最简单方法是什么？ div的宽度和高度未知，即它应该适用于每个div维度以及所有主要浏览器。我的意思是中心对齐。

我想用以下方法进行水平对齐：

margin-left: auto;
margin-right: auto;

和我一样here。

这是一个很好的跨浏览器水平对齐解决方案吗？

我怎样才能进行垂直对齐？

Answer 1

仅当元素的width已知时才可以进行水平居中，否则浏览器无法确定从哪里开始和结束。

#content {
    width: 300px;
    margin: 0 auto;
}

这是完全兼容的交叉浏览器。

垂直居中只有在元素绝对定位且具有已知height的情况下才有可能。然而，绝对定位将会打破margin: 0 auto;，因此您需要以不同的方式处理此问题。您需要将其top和left设置为50%，将margin-top和margin-left设置为其{{<负>一半。分别为1}}和width。

这是一个copy'n'paste'n'runnable例子：

height

也就是说，垂直居中通常很少应用于现实世界。

如果预先知道宽度和高度，那么您需要抓取Javascript / jQuery来设置<!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>和margin-left值，并接受客户端快速查看div的事实在页面加载期间被移位，这可能会导致“wtf？”经验。

Answer 2

“只有在元素绝对定位且具有已知高度的情况下才能进行垂直定心。” - 这句话并不完全正确。

您可以尝试使用display:inline-block;，并可以在其父框中垂直对齐。此技术允许您在不知道其高度和宽度的情况下对齐元素，但它至少需要您知道父级的高度。

如果您的HTML是这样的话;

<div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</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＆lt; 8 * /”的规则应通过使用条件注释放在单独的样式表中。

您可以在此处查看此工作示例：http://jsfiddle.net/UXKcA/3/

编辑:(这个特殊的片段在ie6和ff3.6中进行了测试，但我使用了很多，它非常适合跨浏览器。如果你需要支持ff＆lt; 3，你还需要添加{{1在display:-moz-inline-stack;规则中的display:inline-block;下。}

Answer 3

检查 Demo jsFiddle

设置以下两个内容

HTML 对齐属性值中心
CSS margin-left 和 margin-right 属性值设置自动

<强> 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>

Answer 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跨浏览器div中心对齐

4 个答案: