React Material UI -竖直居中框

Question

我在我的内容上使用了一个来自MUI的盒子包装器，我想让它垂直居中，这样在调整窗口大小时，它就会响应不同的分辨率。尝试使用所有的'Justify‘组合键，但没有帮助：

​

<Box 
      margin='auto'
      justifyContent='center'
      bgcolor='#404040'
      borderRadius='12px'
      boxShadow='2'
      width='1000px'
      height='700px'>
      <div className="title"> NBA Bet </div>
 </Box>

​

Answer 1

您可以使用flex显示模式：

display='flex'
justifyContent='center'

Answer 2

<Box
  display="flex"
  flexDirection="column"
  alignItems="center"
  bgcolor='#404040'
  borderRadius='12px'
  boxShadow='2'
  width='1000px'
  height='700px'
>
  <div className="title"> NBA Bet </div>
 </Box>

你应该看看flexbox是如何垂直居中子对象的。https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

并且不确定您使用的是什么版本的material ui 4或5，但您可以看看版本4中的Box组件和flexbox。https://v4.mui.com/system/flexbox/#align-items