如何将子 div 与较小的父 div 居中

Question

如何将子 div 与较小的父 div 居中

我有一个 div （固定），其作用类似于弹出窗口：

<body>
    <div class="popup-container">
        <div class="popup-item">
            Yolowing
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

此 css 允许容器水平居中（宽度为 100% 使其后面的所有内容都不可点击；因此，我将其设置为 1px）：

.popup-container {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1px;
    z-index: 9999;
}

.popup-item {
    display: block;
    min-width: 20px;
    padding: 25px 50px;
    background-color: yellow;
}

Run Code Online (Sandbox Code Playgroud)

.popup-item但是，由于父元素.popup-container小于其子元素，我无法居中。如何居中.popup-item同时仍然能够单击它（pointer-events: none完全禁用它）？

Answer 1

sha*_*arf 1

投票关闭几乎有它，但由于 1px 宽度，元素没有居中。

改为这样做：

.popup-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    text-align:center;
    height:0px;
}

.popup-item {
    display: inline-block;
    min-width: 20px;
    padding: 25px 50px;
    background-color: yellow;
}

Run Code Online (Sandbox Code Playgroud)

这将使其居中，因为容器的宽度为 100%。但是，pointer-events:none;将允许您单击其下方的任何内容。

归档时间：	11 年，4 月前
查看次数：	2487 次
最近记录：	11 年，4 月前