Question

我在查找如何将<div>置于单击按钮后弹出的<div>内时遇到问题。

不是我的例子，而是类似的。 HTML：

<div class="popup">
    <div class="options">
        <div class="option">
            <span id="1">1</span>
        </div>
        <div class="option">
            <span id="2">2</span>
        </div>
        <div class="option">
            <span id="3">3</span>
        </div>
        <div class="option">
            <span id="4">4</span>
        </div>
    </div>
    <p></p>
    <div id="persona">
        <span id="5">5</span>
    </div>
</div>

CSS：

.popup
{
    background-color: #e3ddd1;
    position: absolute;
    left: 10%;
    top: 10%;
    height: 400px;
    width: 500px;
}
#persona
{
    margin-left: auto;
    margin-right: auto;
}

叠加层仅用于淡出背景，然后弹出窗口显示在其上方。问题出在#persona块中，如何获取它以便<div id="persona">在弹出窗口中居中？

Answer 1

试试这个CSS。 Working Demo

.overlay
{
    background-color: rgba(0, 0, 0, 0.8);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
.popup
{
    background-color: #e3ddd1;
    display: table;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -500px;
    margin-top: -200px;
    height: 400px;
    width: 1000px;
}
#persona
{
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
}

在弹出<div> </div> </div>中居中<div>

1 个答案: