在vertical align div,Popper中定位字符串s

Question

我正在使用Material-UI的Popper

<Popper id={"simplePopper"} open={true}  style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}>
<div style={{height:"100%",verticalAlign: "middle", textAlign: "center"}}>
<i className="fas fa-5x fa-circle-notch fa-spin"></i><br/>
Loading
</div>
</Popper>

我想將fa-spin圖標放在瀏覽器的中間（垂直水平）。

它將圖標放在寬度的中間，但堅持到屏幕的頂部。

verticalAlign: "middle"不起作用。

我應該在哪里修？？

Answer 1

據我所知，您可以做以下兩件事之一：

#simplePopper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

或者如果你因為某種原因不能使用 flexbox

#simplePopper {
  height: 100%;
  width: 100%;
}

#simplePopper > div {
  height: 100%;
  width: 100%;
  margin: auto;
  transform: translateY(50%);
}