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

Question

我正在创建一个叠加层.有一个div用50%透明黑色涂在整个页面上.另一个div必须在屏幕上垂直和水平居中.它必须绝对定位.无论如何在不知道高度/宽度的情况下做到这一点？它将根据屏幕res进行更改.当你知道高度和宽度时,我熟悉绝对定位对中技术(即左边:50%;边距左边:-150px;顶部:50%;边缘顶部:-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;*/
}

Answer 1

只是偶然发现了这个老问题.我认为你现在有两种不同的可能性(浏览器支持正在增长),现在只需要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%);
}

Answer 2

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

body {
  margin: 0;
}

#fade {
  background: #ccc;
  width: 600px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#content {
  background: #fff;
  border: 1px solid #ff0000;
  padding: 20px;
  display: inline-block;
}

<div id="fade">
  <div id="content">
    Something goes here...
  </div>
</div>

在 jsFiddle 上查看

但在这个例子中，您需要知道父容器的确切宽度和高度（.hiddenBg在您的情况下），它不适用于 % 单位。

如果您可以使用 javascript 来完成此任务 - 告诉我们并可能javascript在您的问题中添加标签。我们可以帮助您处理这部分 js 代码。