Question

我有一个模式窗口，在用户单击时打开。我正在尝试将其居中并使用标准CSS代码：

.layout: {
    position: "absolute";
    left: "50%";
    top: "50%";
}

但是它使元素居于其父对象的中心，我也不知道为什么，因为父对象的位置是静态的（因此绝对值应该从屏幕边缘算起，而不是从父屏幕的边缘算起）。如何解决？这是模态窗口的结构：

<div class="layout">
    <div class="window">
        <!--some code --!>
    </div>
</div>

Answer 1

如果要在整个屏幕上居中，则固定位置将是您的选择，并且不要使用硬编码像素来居中，而是使用Transform属性，就像这样

.layout {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

如果要在某个部分或div中居中，请使用绝对位置

.layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

但是在绝对条件下，将position: relative赋予其父项。

如果您将使用transform: translate(-50%, -50%);，则无需担心项目的高度或宽度（以硬编码像素为单位），如果元素的高度和宽度会增加或减少，则项目的对齐方式将会变形

在固定位置的情况下检查以下示例，

.layout {
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%); 
}

<div class="layout">
    <div class="window">
        <!--some code --!>
        ABC
    </div>
</div>

Answer 2

在这种情况下，如果使用绝对或固定定位，则需要设置元素居中宽度的一半宽度和高度的负边距。如果您想将元素设置为与整个屏幕相关，则最好使用“固定”位置

.element {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

如果您需要更灵活的解决方案，则在不知道弹出窗口的大小的情况下，请使用transform: translate(-50%, -50%);代替空白。

Answer 3

CSS position: absolute属性相对于最近定位的父节点定位它。如果要相对于视口放置元素，则应使用position: fixed。

您可以找到有关此属性here的选项的更多信息。