React Material UI 如何实现Box组件垂直居中且适配多分辨率响应式？

解决方案 #

方案1：Flex布局实现（推荐，不脱离文档流） #

该方案适合普通页面布局场景，Box居中后不会影响其他元素的排版，自动适配窗口大小：
首先给当前Box外层加一个父级容器，完整代码如下：

<Box
  sx={{
    minHeight: '100vh', // 占满整个视口高度
    display: 'flex',
    justifyContent: 'center', // 水平居中
    alignItems: 'center', // 垂直居中
    padding: 2, // 小屏设备预留边距，避免Box贴边
  }}
>
  <Box 
    bgcolor='#404040'
    borderRadius='12px'
    boxShadow='2'
    sx={{
      width: 'clamp(300px, 90vw, 1000px)', // 响应式宽度：最小300px，最大1000px，默认占90%视口宽度
      height: 'clamp(400px, 80vh, 700px)', // 响应式高度：最小400px，最大700px，默认占80%视口高度
    }}
  >
    <div className="title"> NBA Bet </div>
  </Box>
</Box>

方案2：定位实现（适合悬浮/弹窗场景） #

不需要额外加父容器，直接修改当前Box的属性即可：

<Box 
  bgcolor='#404040'
  borderRadius='12px'
  boxShadow='2'
  sx={{
    width: 'clamp(300px, 90vw, 1000px)',
    height: 'clamp(400px, 80vh, 700px)',
    position: 'fixed', // 若需要跟随父容器滚动可改为absolute，需保证父容器设置position: relative
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  }}
>
  <div className="title"> NBA Bet </div>
</Box>

注意事项 #

• 你之前设置的justifyContent不生效的原因是该属性仅对display为flex或grid的容器生效，未开启对应布局时属性不会触发效果。
• 若仅需要Box内部的内容垂直居中，直接给当前Box增加三个属性即可：display: flex、flexDirection: 'column'、justifyContent: 'center'。
• 代码中用clamp()替代固定px数值是为了适配不同分辨率，你可以根据业务需求调整三个参数的阈值。

内容的提问来源于stack exchange，提问作者Segev