如何在深色背景页面中居中CSS Loader？React布局问题求助

问题分析 #

你的代码存在两个核心问题导致布局异常：

1. React中需使用className而非class作为类名属性；
2. .bg容器的布局方式无法实现loader的垂直水平居中，且未设置宽度导致背景无法铺满页面。

修改后的代码 #

React组件（修正类名属性）

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

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

export default SpinnerComponent

CSS（实现全屏深色背景+loader居中）

.bg {
    background-color: black;
    /* 使用flex布局实现子元素垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 确保容器铺满整个视口 */
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.loader {
    width: 48px;
    height: 40px;
    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);
    }
}

改动说明 #

• 替换React中的class为className：这是React JSX的语法要求，否则类名不会生效；
• 重构.bg的布局：使用display: flex配合justify-content: center和align-items: center实现loader的垂直水平居中；
• 设置.bg的width: 100vw确保背景铺满整个视口宽度；
• 移除loader的margin-top和display: inline-block：flex布局已自动处理居中，无需额外margin，inline-block也不再需要。

内容的提问来源于stack exchange，提问作者xyz6675