使用CSS在div标记内以水平和垂直方式设置反应组件。

Question

我试图在屏幕上显示一个以水平和垂直为中心的React旋转组件，在搜索和读取不同的类似答案之后，例如这个post，我可以将它水平地对中，目前我的代码如下：

import ClipLoader from "react-spinners/BounceLoader";

function Spinner() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
      }}
    >
      <ClipLoader color="#52bfd9" size={100} />
    </div>
  );
}

export default Spinner;

我得到的结果是：

​

​

但是，我正在处理如何垂直地将其居中，从解决方案中得到的最接近的代码是：

<div style={{ verticalAlign: 'middle', position:'absolute', top: '50%', left: '50%', marginTop: '-100px', marginLeft: '-250px' }}>

但它不是垂直和水平的居中，请看下一张图片：

​

​

我的问题是:您有什么建议，如何在垂直和水平中心的div标签和组件？

Answer 1

有几个选项可以将div的内容作为中心。在第一个示例中，您将div设置为flex并设置所有对齐属性，但是您缺少一个高度。默认情况下，div将是height: auto;。因此，它是垂直对齐内容，但div是项目的高度。将此css添加到包装div中应该会修复它：

height: 100vh;

您也可以很容易地使用网格完成这一任务：

div {
    display: grid;
    height: 100vh;
    margin: 0;
    place-items: center;
}

这两件事都是一样的。你只需要增加一个高度，你就应该做得很好。

Answer 2

有人比我早，但你的第一条路没问题。您只需为您的柔性容器指定高度即可。

演示/示例

https://codesandbox.io/s/centered-spinner-95874e

Answer 3

<div
  className="spinner"
>
  <ClipLoader color="#52bfd9" size={100} />
</div>

在css文件中这样做：

.spinner{
 height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}