css - 边距是否关心相对/绝对位置 [CSS/SCSS]？

Question

我通常使用相对定位使 div 在其父元素中居中。我发现绝对定位也应该有效。我不确定是什么让我的 div 不居中。当某个类被添加到我的 div 时，它从相对定位变为绝对定位，但具有相同类型的边距:

#selectablesDiv{
    order: 1;
    position: relative;
    margin: 10vh auto 30vh auto;
    height: 45px;
    width: 465.94px;
    text-align: center;
    user-select: none;
    opacity: 1;
    display: flex;
    flex-direction: row;

    &.aboutMeClicked{
        position: absolute;
        margin: 62vh auto 30vh auto;
    }
}

父 div 应用了以下 CSS:

#homePageDiv{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: backgroundChange 36s ease-in-out 0s infinite;
}

为什么右边距和左边距变成 0 号。看起来边距是基于相对/绝对定位的，还是我遗漏了什么？

Answer 1

您必须使用 right : 0; 和 left: 0; 将绝对定位元素置于其父元素的中心(结合 margin-left: auto ; 和 margin-right: auto;).

#homePageDiv {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: backgroundChange 36s ease-in-out 0s infinite;
    background-color: red;
}

#selectablesDiv {
    order: 1;
    position: relative;
    margin: 10vh auto 30vh auto;
    height: 45px;
    width: 465.94px;
    text-align: center;
    user-select: none;
    opacity: 1;
    display: flex;
    flex-direction: row;
    background-color: yellow;
}

#selectablesDiv.aboutMeClicked {
       position: absolute;
       margin: 62vh auto 30vh auto;
       right: 0;
       left: 0;
}

<div id="homePageDiv">
  <div id="selectablesDiv" class="aboutMeClicked"></div>
</div>