12

我正在创建一个叠加层。有一个 div 用 50% 透明黑色覆盖整个页面。另一个 div 必须居中，垂直和水平到屏幕。它必须绝对定位。无论如何在不知道高度/宽度的情况下这样做吗？它将根据屏幕分辨率而变化。当您知道高度和宽度时，我熟悉绝对定位居中技术，（即left：50％；margin-left：-150px；top：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;*/
}
4

4 回答 4

17

偶然发现了这个老问题。我认为你现在有两种不同的可能性来做到这一点（浏览器支持正在增长）只用 CSS，不需要 JavaScript：

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%);
}

在前三行中，对象将被放置在父容器的中间，top并left设置为50%。不幸的是，这适用于对象的左上角。所以它看起来不会在视觉上居中。第四行通过将中心点转换到对象的中间来纠正这一点。请注意，它的父容器需要相对定位。

于 2015-09-25T10:24:23.933 回答
3

您可以使用父级div和通用 CSS 属性来实现。它的优点是可以在任何地方工作，不需要 JS 或 flexbox：

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

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

    #child {
        display: inline-block;
    }
</style>
于 2017-07-10T10:13:06.473 回答
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 代码。

于 2012-08-25T22:35:49.757 回答
2 
.hiddenBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
于 2018-11-22T12:10:23.527 回答