首页 文章

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

提问于
浏览 次
5

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

4 回答

  • 1

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

    http://jsfiddle.net/XyYND/

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

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

    回复于
  • 8

    您可以使用父 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>
    回复于
  • -1

    只是偶然发现了这个老问题 . 我认为你现在有两种不同的可能性（浏览器支持正在增长），现在只需要CSS，不需要JS：

    1. Do it with flexbox

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

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

    2. Absolute + negative transform translate

    .hiddenBox {
    position: absolute;
    top: 50%;
    left: 50;
    transform: translateX(-50%) translateY(-50%);
}
    回复于
  • 3
    .hiddenBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
    回复于

相关问题