React Material UI - 垂直中心框[重复]

Posted 2023-02-22

【中文标题】React Material UI - 垂直中心框[重复]

【英文标题】：React Material UI - Center Box vertically [duplicate]

【发布时间】：2022-01-03 16:50:16

【问题描述】：

我在我的内容上使用来自 MUI 的盒子包装器，并且我想将其垂直居中，因此在调整窗口大小和不同分辨率时它会做出响应。尝试使用所有“证明”组合，但没有帮助：

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

【参考方案1】：

您可以使用弹性显示模式：

display='flex'
justifyContent='center'

【讨论】：

flex 可能有助于将框内的内容居中，但我想将框本身居中（框有 bgcolor，我希望它保存所有数据并居中）

【参考方案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

不确定你使用的是什么版本的材料 ui 4 或 5，但你可以看看版本 4 中的Box 组件和弹性框。 https://v4.mui.com/system/flexbox/#align-items