title: How to keep content in position when zooming in and out on your browser
body: <p>I have a div where I inputted a picture and I "Position: absolute" another div that when clicked will bring you down to the bottom of the page. But when you zoom out, it stays in place but, when you zoom out it moves down and out of the picture div. I am asking, how do i keep my content centered and in position when zooming in and out of your browser. I searched all over stack and other websites but can't find a solution.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pic-div {
   width: 100%;
   height: 700px;
   margin: 0 auto;
   overflow: hidden;
  }
  #pic-button {
   width: 100px;
   height: 100px;
   margin: 0 auto;
  }
  #down-button {
   max-width: 200px;
   max-height: 200px;
   background-color: black;
   border-style: none;
   color: white;
   font-family: 'Coiny', cursive;
   position: absolute;
   cursor: pointer;
   margin: 0 auto;
   margin-top: 500px;
  }
  #down-button:hover {
   background-color: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pic-div"&gt;
  &lt;div id="welcome-pic"&gt; &lt;img id="pic-welcome" src="luxpics/logobar.jpg"&gt;
    &lt;div id="pic-button"&gt;
      &lt;button id="down-button"&gt;LET'S START&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div</code></pre>
  </div>
  </div>
  </p>