将加载器居中放置在页面中间答案

【问题标题】：Center the loader in the middle of the page将加载器居中放置在页面中间
【发布时间】：2023-01-10 01:17:31
【问题描述】：

我试图将我从 https://cssloaders.github.io/ 获得的这个加载程序置于页面中间，背景为深色。

我目前得到了一些奇怪的布局，但不确定如何做同样的事情。

这是 .css 文件

.bg {
    background-color: black;
    display: table;
    max-height: 100vh;
    min-height: 100vh;
}

.loader {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: relative;
    background: #000;
    border-radius: 15% 15% 35% 35%;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 45px;
    top: 8px;
    border: 4px solid #FFF;
    width: 16px;
    height: 20px;
    border-radius: 0 4px 4px 0;
  }
  .loader::before {
    content: '';  
    position: absolute;
    width: 1px;
    height: 10px;
    color: #FFF;
    top: -15px;
    left: 11px;
    box-sizing: border-box;
    animation: animloader 1s ease infinite;
  }
  
  @keyframes animloader {
      0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }
      50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }
      100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
    }

js文件

import React from 'react'
import './styles.css'

const SpinnerComponent = () => {
    return (
        <div class="bg">
        <span class="loader"></span>
        </div>
    )
}

export default SpinnerComponent

任何帮助，将不胜感激

【问题讨论】：

标签： html css reactjs flexbox css-animations

【解决方案1】：

更改在.loader 和.bg 中：

.bg {
    background-color: black;
    
    max-height: 100vh;
    min-height: 100vh;
    position: relative;
}

.loader {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: absolute;
    background: #000;
    border-radius: 15% 15% 35% 35%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 45px;
    top: 8px;
    border: 4px solid #FFF;
    width: 16px;
    height: 20px;
    border-radius: 0 4px 4px 0;
  }
  .loader::before {
    content: '';  
    position: absolute;
    width: 1px;
    height: 10px;
    color: #FFF;
    top: -15px;
    left: 11px;
    box-sizing: border-box;
    animation: animloader 1s ease infinite;
  }
  
  @keyframes animloader {
      0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }
      50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }
      100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
    }

<div class="bg">
    <span class="loader"></span>
</div>

【讨论】：