找到垂直对齐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%);
}