title: How to center a CSS spinning animation div?
body: <p>I'm trying to create a basic responsive-design webpage.</p>
  
  <p>As soon as the visitor arrives, I want them to see a CSS spinning animation loader before the loader fades out and the content fades in - I have acheived this using code from: <a href="https://ihatetomatoes.net/demos/css3-preloader/" rel="nofollow noreferrer">https://ihatetomatoes.net/demos/css3-preloader/</a> of course modified to my own design. I will never know the exact size of the spinning animation loader as it sizes based on the browser being used - i.e. I use <code>vmin</code> for the <code>width</code> and <code>height</code> of the loader.</p>
  
  <p>My issue now is trying to perfectly centre-align the animation loader (both horizontally and vertically, i.e. in the middle of the page).</p>
  
  <p>I've tried various posts on CSS tricks (such as <code>vertical-align: middle;</code>) and on here, and any alterations I've made using these code tutorials have resulted in the CSS spinning animation loader either not appearing, showing at the top-left of the page, or showing in random places accross the page (this is based on viewing on Chrome for Desktop and Safari for iPhone 8 Plus).</p>
  
  <p>My code is extensive - I'm fairly new to coding and I'm experimenting, so I apologise for posting unnecessary parts of code.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#page-wrapper {
  position: relative;
  }
  
  #loader-wrapper {
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  }
  
  #loader {
  display: inline-block;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  background-size: contain;
  width: 8vmax;
  height: 8vmax;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #FFFFFF;
  
  -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  
  z-index: 1001;
  }
  
  @-webkit-keyframes spin {
      0%   { 
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
      100% {
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
      }
  }
  @keyframes spin {
      0%   { 
          -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(0deg);  /* IE 9 */
          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
      100% {
          -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: rotate(360deg);  /* IE 9 */
          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
      }
  }
  
  /* Loaded */
  
  .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;  
              transition: all 0.3s ease-out;
  }
  
  #content {
  position: center;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 4vmin;
  letter-spacing: 0.2vmin;
  color:#FFFFFF;
  }
  
  h1.title {
  text-align: center;
  color: #FFFFFF;
  font-family: "lato", sans-serif;
  font-weight: 700;
  font-size: 10.5vmin;
  letter-spacing: 1.05vmin;
  }
  </code></pre>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="page-wrapper"
  &lt;div id="content"&gt;
  &lt;h1 class="title"&gt;Website Title&lt;/h1&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;Our website is currently under construction.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="loader-wrapper"&gt;
  &lt;div id="loader"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure if links to draft webpages are allowed or not, but to see my actual page, the link is: <a href="http://firenite.uk/other/suc/test/bg3.html" rel="nofollow noreferrer">http://firenite.uk/other/suc/test/bg3.html</a></p>