Why isn't my div block staying in the same place?

December 7, 2021

In the first pic, you can see the blue block is centered in the grey background. It’s how I want it to be. Fine. However, in the second pic it did not move when the window scaled up. The blue block is the #bodyCenterCont and it’s inside of the #bodyCont. If you need more code, please let me know. I’ve tried all the different positions and margins. I don’t have a full understanding of relevant, fixed, and absolute.

Heading ##CODE:

*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */

*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}


/* Preferred box-sizing value */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css */

ol,
ul {
  list-style: none;
}


/* For images to not be able to exceed their container */

img {
  max-width: 100%;
}


/* Removes spacing between cells in tables */

table {
  border-collapse: collapse;
}


/* Revert the 'white-space' property for textarea elements on Safari */

textarea {
  white-space: revert;
}

#parentCont {
  background-color: grey;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

#welcomeCont {
  background-image: linear-gradient(rgb(255, 0, 0), rgb(255, 255, 0));
  height: 150px;
}

#welcomeText {
  color: rgb(0, 0, 0);
  font-size: 35px;
  margin-top: 40px;
  text-align: center;
}

#bodyCont {
  background-image: linear-gradient(grey, black);
  height: 100%;
  width: 100%;
}

#bodyCenterCont {
  background-color: blue;
  height: 400px;
  width: 350px;
  position: relative;
  margin-top: 15%;
  margin-left: 30%;
}

<div id="parentCont">
  <div id="welcomeCont">
    <p id="welcomeText">Legend & Myth</p>
  </div>

  <div id="bodyCont">
    <div id="bodyCenterCont">

    </div>
  </div>
</div>

>Solution :

try this one:

#bodyCenterCont{
position: absolute;
height:400px;
width:350px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background:blue;
padding: 10px;
}