[SOLVED] How To Have Div Fixed To Middle Of Screen, Yet Only In The X-Plane?

How To Have Div Fixed To Middle Of Screen, Yet Only In The X-Plane?

So basically I want a div that is in the middle of screen and it is fixed there, but only in the x-axis, so no matter if I scroll left or right, it stays in the middle of the screen however when I want to scroll down I want to it to scroll away just like it would if it were relative. I hope you understand what I mean.

This is the code that I've put for that div so far when trying to achieve this.

#header{
    position:fixed;
    top:0px;
    left:50%;
    margin-left:-100px;
    width:200px;
    height:160px;
}

This code has it fixed in both the x-plane and y-plane, so that when I scroll down it stays in the same spot on the screen and it doesn't go away as I scroll down like it would if it were relative.

Update

This is all my code with the answer. Go into full screen snippet mode and then make your window small enough, so that you have to scroll for the image. And once you scroll enough the to the right, the header moves to the left.

.text{
    text-align:center;
}


#header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    /* left: calc(50% - 100px); */
    transform: translateX(-50%);
  }


#image{
    position: relative;
    display: block;
    margin: auto;
    width: 1200px;
    height:600px;
    z-index:2;
    overflow:clip;
}


#div{
    position: relative;
    display:block;
    margin: auto;
    height: 600px;
    width: 1200px;
    border: 5px solid black;
    background:linear-gradient(#1a1536,rgb(40, 9, 90), rgb(18, 29, 87),#1a1536);
    z-index:1;
    overflow:clip;
}

<div id="header">
        <h1 class="text">Title</h1>
        <h3 class="text">SubTitle</h3>
        <h2 class="text">SubTitle</h2>
    </div>

    <div id="div">
        <img class="place" id="image" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconsdb.com%2Flight-gray-icons%2Fsquare-icon.html&psig=AOvVaw1fzZXNZn7_2YEF6WDUukgV&ust=1722012245418000&source=images&cd=vfe&opi=89978449&ved=0CA8QjRxqFwoTCPjMyNPRwocDFQAAAAAdAAAAABAE">
    </div>

Solution

You could use position sticky, with the left position as 50% but no top position set.

Here's a simple example:

<style>
  body {
    width: 300vw;
    height: 300vh;
  }
  
  #header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    transform: translateX(-50%);
    left: 50%;
    background: blue;
  }
</style>

<body>
  <div id="header">fixed div</div>
</body>