How to center a CSS spinning animation div?

Question

I'm trying to create a basic responsive-design webpage.

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: https://ihatetomatoes.net/demos/css3-preloader/ 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 vmin for the width and height of the loader.

My issue now is trying to perfectly centre-align the animation loader (both horizontally and vertically, i.e. in the middle of the page).

I've tried various posts on CSS tricks (such as vertical-align: middle;) 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).

My code is extensive - I'm fairly new to coding and I'm experimenting, so I apologise for posting unnecessary parts of code.

CSS:

#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;
}

HTML:

<div id="page-wrapper"
<div id="content">
<h1 class="title">Website Title</h1>
<p></p>
<p>Our website is currently under construction.</p>
</div>

<div class="loader-wrapper">
<div id="loader"></div>
</div>

I'm not sure if links to draft webpages are allowed or not, but to see my actual page, the link is: http://firenite.uk/other/suc/test/bg3.html

`position: absolute center;` hummm are you sure absolute center is correct? — Roko C. Buljan, Aug 26 '19 at 21:36
@RokoC.Buljan Apologies for this mishap - this has been altered to just 'center'. It still doesn't affect the page in any way however. — camzenxbt, Aug 26 '19 at 21:41

score 4 · Answer 1 · answered Aug 26 '19 at 21:43

See edits in CSS comments:

* {margin:0; box-sizing:border-box;}

html,
body {
  height: 100%;
  background: #0bf;
}

#loader-wrapper {
  position: fixed;      /* SET TO FIXED */
  top: 0;
  left: 0;
  width: 100vw;         /* USE VIEWPORT UNITS */ 
  height: 100vh;        /* USE VIEWPORT UNITS */
  z-index: 1001;        /* MOVE Z-INDEX HERE! */
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8vmax;
  height: 8vmax;
  margin: -4vmax;       /* ADD THIS (half the W/H) */
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #FFFFFF;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

<div id="loader-wrapper">
  <div id="loader"></div>
</div>

How to center a CSS spinning animation div?

1 Answers1