以绝对定位为中心，不知道宽度或高度(centering with absolute positioning WITHOUT knowing width or height)

我正在创建一个覆盖。有一个div用50％透明黑色涂在整个页面上。另一个div必须居中，垂直和水平的屏幕。它必须绝对定位。无论如何不知道高度/宽度来做到这一点？它将根据屏幕资源改变。当你知道高度和宽度（即左：50％;左：-150px;上：50％; margin-top：-300px;）时，我熟悉绝对定位定心技术......但是，我能否在不知道高度/宽度的情况下做到这一点？这是代码：

.hiddenBg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 10000; /*display: none;*/ } .hiddenBox { position: absolute; left: 50%; margin-left: -200px; top: 50%; margin-top: -100px; width: auto; height: auto; background-color: #FF7F00; border: solid 10px white; z-index: 10001; text-align: center; /*display: none;*/ }

I am creating an overlay. There is a div that coats the whole page in 50% transparent black. Another div must be centered, vertically and horizontally to the screen. It must be absolutely positioned. Is there anyway to do this without knowing the height/width? It will change based on screen res. I am familiar with the absolute positioning centering techniques when you know the height and width, (i.e. left: 50%; margin-left: -150px; top: 50%; margin-top: -300px;)... But again, can I do this without knowing the height/width? Here is the code:

最满意答案

你可以用javascript来做到这一点。动态获取.hiddenbox宽度和高度，并使用您熟悉的技术正确定位它。还有一个选项，请查看此处的示例：

http://jsfiddle.net/XyYND/

但在这个例子中，你需要知道父容器的确切宽度和高度（在你的案例中是.hiddenBg ），它不能用％单位。

如果您可以使用JavaScript来完成此任务 - 请告诉我们，并且可能会将javascript标记添加到您的问题中。我们可以帮助您处理js代码的这一部分。

You can do it with javascript. Dynamically get width and height of .hiddenbox and properly position it using technique you are familiar with. There's one more option to play with, check the example here:

http://jsfiddle.net/XyYND/

But in this example you need to know the exact width and height of parent container (.hiddenBg in your case), it won't work with % units.

If you are ok to use javascript for this task - tell us and possibly add javascript tag to your question. We can help you with that part of js code.

更多推荐