如何将Material UI中Grid子项垂直居中于祖父容器Grid？

你当前的结构里，祖父Grid是column方向且占满视口高度，第一个Grid item（按钮）占据了顶部部分空间，导致第二个Grid的高度是视口高度减去按钮高度，所以里面的SearchBox只能在这个子Grid里居中，没法做到整个祖父容器的垂直居中。

解决思路是让按钮脱离文档流，不占用垂直布局空间，这样第二个Grid就能填满整个视口高度，进而让SearchBox在整个祖父容器中居中：

<Grid container height="100vh" direction="column" position="relative">
  {/* 按钮设置绝对定位，固定在右上角 */}
  <Grid item alignSelf="flex-end" position="absolute" top={16} right={16}>
    <Button variant="text">List Your Property</Button>
  </Grid>
  {/* 填满整个视口，通过alignItems和justifyContent实现内容居中 */}
  <Grid container item flex={1} justifyContent="center" alignItems="center">
    <Grid item>
      <SearchBox />
    </Grid>
  </Grid>
</Grid>

关键调整点：

• 给祖父Grid添加position="relative"，作为绝对定位元素的参考容器
• 按钮所在的Grid item添加position="absolute"，通过top和right固定到右上角，避免占用垂直布局空间
• 将子Grid的alignContent="center"改为alignItems="center"，单内容行场景下alignItems是更合适的垂直对齐属性

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