3

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

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

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

最好的问候约翰

4

2 回答 2

7 
<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;
});
于 2012-05-06T13:55:36.437 回答
4

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

HTML

​&lt;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>

于 2012-05-06T13:59:23.843 回答