<div class="flex">
  <div class="box">Flex</div>
</div>
<div class="grid">
  <div class="box">Grid</div>
</div>
<div class="pos">
  <div class="box">Position</div>
</div>

:root {
  --body-bg: hsl(30, 20%, 5%);
  --flex-color: hsl(10, 80%, 60%);
  --grid-color: hsl(30, 80%, 60%);
  --pos-color: hsl(50, 80%, 60%);
  --box-color: hsl(180, 40%, 50%);
  --box-text: hsl(30, 20%, 20%)
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--body-bg);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
}

.flex {
  width: 100%;
  height: 100%;
  border: 2px solid var(--flex-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid {
  width: 100%;
  height: 100%;
  border: 2px solid var(--grid-color);
  display: grid;
  place-items: center;
}
.pos {
  width: 100%;
  height: 100%;
  border: 2px solid var(--pos-color);
  position: relative;
}
.box {
  width: 40%;
  height: 40%;
  background: var(--box-color);
  color: var(--box-text);
  text-align: center;
  display: grid;
  place-items: center;
}

.pos > .box{
  position: absolute;
}

@media (max-width: 750px) {
  body {
    flex-direction: column;
  }
}

const pos = document.querySelector('.pos');
const posBox = document.querySelector('.pos > .box');


const intervalID = setInterval(() => {
  posBox.style.top = (pos.clientHeight/2) - (posBox.clientHeight/2) + 'px';
posBox.style.left = (pos.clientWidth/2) - (posBox.clientWidth/2) + 'px';
}, 1);