如何将CSS旋转动画居中？

这个问题已经有答案了:

如何在缩放动画中保持图像中心的原点？

如何居中一个“position: absolute”的元素

如何在div中居中一个绝对定位的元素？

我正在尝试创建一个基本的响应式设计网页。

当访问者到达时，我希望他们在加载器(fades in)淡出并且内容(fades out)淡入之前看到一个CSS旋转动画加载器-我使用https://ihatetomatoes.net/demos/css3-preloader/中的代码进行了修改，当然是根据我的设计修改的。我永远不会知道旋转动画加载器的确切大小，因为它基于浏览器的大小进行调整-例如，我使用vmin来调整加载器的width和height。

我的问题现在是试图完美地将动画加载器（水平和垂直）居中对齐（即在页面的中间）。

我尝试过各种在CSS技巧网（例如vertical-align: middle;）和这里发布的帖子，并且使用这些代码教程所做出的任何更改都导致CSS旋转动画加载器不出现、显示在页面的左上角，或在页面上的随机位置显示（这是基于查看Chrome for Desktop和iPhone 8 Plus的Safari）。

我的代码非常庞大——我刚刚开始编码，正在尝试一些东西，所以我很抱歉发布了一些不必要的代码部分。

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：

我不确定是否允许链接到草稿网页，但要查看我的实际页面，请访问链接: http://firenite.uk/other/suc/test/bg3.html