html - 如何使 CSS 旋转动画 div 居中？

Question

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

一旦访问者到达，我希望他们在加载器淡出和内容淡入之前看到一个 CSS 旋转动画加载器 - 我已经使用以下代码实现了这一点:https://ihatetomatoes.net/demos/css3-preloader/当然是根据我自己的设计进行修改。我永远不会知道旋转动画加载器的确切大小，因为它的大小基于所使用的浏览器 - 即我使用 vmin对于width和height装载机的。

我现在的问题是尝试使动画加载器完美居中对齐(水平和垂直，即在页面中间)。

我已经尝试过有关 CSS 技巧的各种帖子(例如 vertical-align: middle; )和此处，并且我使用这些代码教程所做的任何更改都导致 CSS 旋转动画加载器不出现，显示在顶部- 页面左侧，或显示在页面的随机位置(这是基于在桌面版 Chrome 和 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:

<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>

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

Answer 1

查看 CSS 注释中的编辑:

* {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>