Question

我正在尝试垂直对齐模态框。但是margin-top:50%并没有像我期望的那样发挥作用。基本上我想要一个以另一个广场为中心的广场。

<style type="text/css">
#modal {
    width: 300px;
    height: 300px;
    z-index: 100;
    background-color: red;
    margin: 0 auto;
    position:relative;
    margin-top:50%; //problem here

}

#content {
    position: absolute;
    width:950px;
    height: 950px;
    margin: 0 auto;
    background-color: green;
}

#replace {
 width:950px;
 height:500px;   
}


</style>

<div id="replace">
<div id = "content"></div>
<div id="modal"></div>
</div>

感谢

demo

Answer 1

而不是保证金，您需要top:325px;使用#modal

Answer 2

如果modal div中包含content并不太麻烦，您可能需要尝试使用此HTML：

<div id = "content">
    <div id="modal"></div>
</div>

...用这个CSS：

#modal {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

#content {
    position: absolute;
    width: 550px;
    height: 550px;
    background-color: green;
}

Demo

基本上你绝对将modal div放在content div内，并告诉它从顶部开始50％，从左边开始50％。这将使modal的左上角居中，而不是整个div的左上角。要将div作为一个整体居中，您必须添加一个负边距以将其向上和向左移动。负边距的数量是modal div的高度/宽度的一半。

如果你想保持相同的HTML，你仍然可以使用这种技术完成同样的事情，只需确保在position: relative div上replace，以便任何absolute ly - 位置儿童相对于它定位。

Answer 3

如果您希望将其中的绝对定位元素相对于其定位，请将position: relative;添加到您的容器中：

#replace {
  position: relative;
  width: 950px;
  height: 500px;
}

然后设置为您要定位的项目的最高值。有一点需要注意，你的#replace div就是这里的容器，但是它比#content div小，所以当你放置#modal时，你将不得不给它特定的像素值让它在#content上居中

垂直对齐 - z-index

3 个答案: