以绝对定位为中心不知道宽度或高度

我正在创建叠加层。有一个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;*/ 
}

来源

2012-08-25 eatonphil

是那些数字的动态？你可以使用JS来获得宽度和高度吗？ –

查看* [以未知为中心]（http://css-tricks.com/centering-in-the-unknown/）*。 –

看起来像一个新的[CSS灵活框]（https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes）规范的工作，但它们远远没有完成或支持。 – thirdender

你可以用javascript来做到这一点。动态获取.hiddenbox的宽度和高度，并使用您熟悉的技术正确定位。还有一个选项一起玩，检查这里的例子：

http://jsfiddle.net/XyYND/

但是在这个例子中，你需要知道（你的情况.hiddenBg）的确切宽度和父容器的高度，它不会工作与％单位。

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

来源

2012-08-25 22:35:49

刚刚偶然发现了这个老问题。我觉得你有两种不同的可能性，只是现在用CSS来做到这一点（浏览器支持的增长），没有JS要求：

1. Flexbox的

<div class="hiddenBg"> 
    <div class="hiddenBox"> 
     Hello 
    </div> 
</div> 

<style> 
    .hiddenBg { 
     display: flex; 
     align-items: center; 
     justify-content: center; 
    } 
</style>

2.绝对+负做吧变换翻译

.hiddenBox { 
    position: absolute; 
    top: 50%; 
    left: 50; 
    transform: translateX(-50%) translateY(-50%); 
}

来源

2015-09-25 10:24:23

您可以与父母div，共同CSS属性做到这一点。它具有无处不在的优点，不需要JS或Flexbox：

<div id="parent"> 
    <div id="child">Hello, I am div !</div> 
</div> 

<style> 
    #parent { 
     position: absolute; 
     width: 100%; 
     text-align: center; 
    } 

    #child { 
     display: inline-block; 
    } 
</style>

来源

2017-07-10 10:13:06 Soocks

以绝对定位为中心不知道宽度或高度

回答

相关问题