Do margins care about relative/absolute position [CSS/SCSS]? - css

Question

I normally use relative positioning to center a div in its parent. I found that absolute positioning should also work. I am not certain what is making my div not centered. When a certain class is added to my div, it changes from relative to absolute positioning, but with the same type of margins:
#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;
}
}
The parent div has the following CSS applied to it:
#homePageDiv{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
animation: backgroundChange 36s ease-in-out 0s infinite;
}
Why do the right and left margins become size 0. It seems that the margins are based off of relative/absolute positioning, or is there something I'm missing?

Answer 1

You have to use right : 0; and left: 0; to center an absolute positioned element in it's parent (combined with margin-left: auto; and 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>