javascript - 不知道 div 宽度的 div 水平居中，可能吗？

Question

我目前正在使用 css/jquery 构建一个弹出框脚本，但在所有情况下我似乎都无法让 div 居中在屏幕上。是否可以在不知道 div 宽度的情况下将其居中？

我没有在此处发布所有代码，而是在http://goo.gl/N45cp上提供了一个实时示例

非常感谢任何形式的帮助！

最好的问候约翰

Answer 1

<div id="wrapper">
    <div id="child"></div>
</div>

如果 的位置#child不是absolute，可以将左右边距设置为auto：

#child {
   margin: 0 auto;
}

或者，如果职位是absolute您可以尝试以下操作：

$("#child").css("left", function(){
    return ($("#wrapper").width() - $(this).width()) / 2;
});

Answer 2

如果你有一个包含的 div，你可以用纯 CSS 实现这一点：

HTML

​<div id="outer">
    <div id="inner">some content here</div>
</div>

CSS

​body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }

http://jsfiddle.net/NjZbW/

​​​​​​​​​​​​​​​​</p>