Html 如何将CSS旋转动画分区居中？

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

一旦访问者到达，我希望他们在加载程序淡出和内容淡入之前看到CSS旋转动画加载程序-我已经使用以下代码实现了这一点：当然，修改为我自己的设计。我永远不会知道旋转动画加载程序的确切大小，因为它的大小取决于所使用的浏览器-即，我使用加载程序的

宽度
和
高度

我的问题是试图完美地将动画加载程序（水平和垂直，即页面中间）对齐。
我尝试过各种CSS技巧（如
垂直对齐：中间；
）和此处，我使用这些代码教程所做的任何更改都会导致CSS旋转动画加载程序要么不出现，要么显示在页面的左上角，要么显示在页面的任意位置（这是基于在Chrome桌面浏览器和Safari iPhone 8 Plus浏览器上的查看）

我的代码很广泛——我对编码还比较陌生，我正在试验，所以我为发布代码中不必要的部分而道歉

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>

请参见CSS注释中的编辑：


*{边距：0；框大小：边框框；}
html，
身体{
身高：100%；
背景：#0bf；
}
#装载机包装{
位置：固定；/*设置为固定*/
排名：0；
左：0；
宽度：100vw；/*使用视口单位*/
高度：100vh；/*使用视口单位*/
z-index:1001；/*将z-index移到这里*/
}
#装载机{
位置：绝对位置；
左：50%；
最高：50%；
宽度：8V最大；
高度：8V最大；
保证金：-4vmax；/*加上这个（一半的水/小时）*/
边界半径：50%；
边框：4px实心透明；
边框顶部颜色：#FFFFFF；
动画：旋转1s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

位置：绝对中心；
哼哼你确定绝对中心正确吗？
左边距：-4vmax；
@RokoC.Buljan对这一不幸事件表示歉意-这已更改为仅“中心”。但它仍然不会以任何方式影响页面。