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

您可以使用父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>

Answer 3

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

http://jsfiddle.net/XyYND/

但是在这个示例中，您需要知道父容器的确切宽度和高度（在您的情况下为.hiddenBg），它不适用于％units。

如果您可以使用javascript完成此任务 - 请告诉我们并在您的问题中添加javascript标记。我们可以帮助您使用js代码的那一部分。

Answer 4

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

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

4 个答案: