Question

我找到了一些关于如何在空心屏幕中居中弹出div的解决方案，但是我需要将它（在垂直和水平方向上）放在其父div中。弹出窗口没有固定的大小，它们相对于父div的大小。我没有发现任何关于这个的事情，我自己也做不到。如果您有任何想法，请提供帮助。

<div id="container" style="width: something; height: something;> some text <br> some text     
<div class="popup"></div>
</div>


div.popup {
    height: 95%;
    width: 95%;
    border-color: #d3d7cf;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    background-color: #f3f3f3;
    z-index: 1;
}

Answer 1

我们需要了解您的文档代码。但根据我的理解，你想要以div元素为中心。将div元素的位置设置为相对，将主容器的位置设置为绝对，并将以下 CSS 代码添加到弹出框中。

.popup{
position:absolute;
top:50%;
height: <your value in percentage>;
margin-top: (negative value of your height, divided by 2);
width:<your value in percentage>;
left:50%;
margin-left: (negative value of your width, divided by 2);
}

Answer 2

如果我理解你的话，你的两个元素的高度都是动态的。我通常做的是添加一些javascript。（假设jQuery）

function verticalAlign(el) {
    // Calculate marginTop by taking parents height minus element height
    // and divide the value by two
    var marginTop = (el.parent().height() - el.height()) / 2;

    // Apply the top margin to the element
    el.css('margin-top', marginTop);
}

verticalAlign($('.verticalAlign'));

如何将一个弹出窗口置于div内？

2 个答案: