ReactJS组件中Div在多浏览器无法屏幕居中的求助

问题核心 #

你当前的loader类仅配置了水平居中属性，但容器本身没有足够的垂直高度，导致align-items: center无法生效。默认情况下块级元素高度由内部内容决定，你的loaderdiv高度仅包裹h1内容，自然无法让内容垂直居中于屏幕。

解决方案 #

方案1：调整自定义CSS #

修改CSS，确保html、body和loader都占满屏幕高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh; /* 占满视口高度，比固定height更适配移动端 */
}

同时修正React JSX中的语法错误（React需用className而非class）：

function Loading() {
    return (
        <div className="loader">
            <h1>Hello World</h1>
        </div>
    )
}

export default Loading

方案2：使用TailwindCSS类（更简洁） #

既然已安装Tailwind，直接用内置类实现全屏居中，无需自定义CSS：

function Loading() {
    return (
        <div className="min-h-screen w-full flex justify-center items-center">
            <h1>Hello World</h1>
        </div>
    )
}

export default Loading

• min-h-screen：让容器占满视口最小高度
• w-full：宽度拉满100%
• flex justify-center items-center：同时实现水平、垂直居中

为什么单独加width:100%无效？ #

垂直居中依赖容器有足够的垂直空间，仅设置宽度无法提供垂直方向的布局范围，只有当容器高度覆盖整个屏幕时，align-items: center才能将内容定位到垂直中点。

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