如何使 CSS 旋转动画 div 居中？ [复制]答案

【问题标题】：How to center a CSS spinning animation div? [duplicate]如何使 CSS 旋转动画 div 居中？ [复制]
【发布时间】：2019-12-31 01:48:53
【问题描述】：

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

访问者一到达，我希望他们在加载器淡出和内容淡入之前看到一个 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

【问题讨论】：

position: absolute center; 嗯，你确定绝对中心是正确的吗？
margin-left: -4vmax;
@RokoC.Buljan 为这次事故道歉 - 这已被更改为“中心”。但是，它仍然不会以任何方式影响页面。

标签： html css css-animations

【解决方案1】：

查看 CSS cmets 中的编辑：

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

【讨论】：