Reactsj div 在各种浏览器中不居中

Question

我在将 div 居中放置在我的 React 应用程序中时遇到麻烦。 jsx 代码：

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

export default Loading

CSS（在 public/index.html 内）：

    .loader {
      display: flex;
      justify-content: center;
      align-items: center;
    }

我安装了 TailwindCSS 和 DaisyUI。我尝试将

width: 100%;

添加到加载器类，但这也不起作用。我最初在 chrome 上遇到这个问题，然后我在 chrome 和 firefox 上发现了同样的问题。操作系统是 Ubuntu 22.04 LTS。与图像不同，我希望内容位于屏幕中央，而不是粘在顶部：

谢谢您！

Answer 1

要将 .loader div 置于屏幕中间，您需要确保其父容器覆盖整个视口高度。以下是实现这一目标的方法：

import React from 'react';

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

导出默认Loading；

如果这不适合您，请告诉我。