如何在React中使用Material-UI实现元素垂直水平居中？

我来帮你分析问题根源，再给出两种实用的解决思路：

问题到底出在哪？ #

1. Card内部布局失效：你给Card加了align="center"和justify="center"，但这俩不是Card组件的原生属性，而且Card默认不是flex容器，所以这些设置完全起不到让Button居中的作用。
2. Card页面水平居中不稳定：虽然root类设置了justifyContent: "center"，但Grid组件的默认布局规则可能干扰了Card的水平对齐，导致只有垂直居中生效。

方法一：把Card改成Flex容器（最直接） #

通过CSS让Card成为flex容器，同时确保它在页面中完全居中：

import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
    minWidth: '100%',
    minHeight: '100vh',
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center" // 新增：让Card在页面水平居中
  },
  card: {
    maxWidth: '40%',
    minHeight: '20vh',
    display: 'flex', // 将Card转为flex容器
    alignItems: 'center', // 垂直居中内部Button
    justifyContent: 'center', // 水平居中内部Button
  },
})

export default function LoginPage () {
  const classes = useStyles()
  return (
    <Grid className={classes.root}>
      <Card className={classes.card}>
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </Card>
    </Grid>
  )
}

关键点说明：

• root类新增alignItems: "center"，配合原有的justifyContent: "center"，让Card在整个页面实现垂直+水平双居中。
• 给Card添加flex相关样式，让内部的Button自动在Card容器里居中。

方法二：用Material-UI的Box组件（组件化推荐） #

如果你不想修改Card的基础样式，推荐用Material-UI自带的Box组件包裹Button，它内置了flex布局属性，更贴合Material-UI的设计思路：

import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { Card, Box } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
    minWidth: '100%',
    minHeight: '100vh',
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  card: {
    maxWidth: '40%',
    minHeight: '20vh',
    padding: 16 // 可选：给Card加内边距，避免Button贴边
  },
})

export default function LoginPage () {
  const classes = useStyles()
  return (
    <Grid className={classes.root}>
      <Card className={classes.card}>
        <Box 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          height="100%"
        >
          <Button variant="contained" color="primary">
            Hello World
          </Button>
        </Box>
      </Card>
    </Grid>
  )
}

关键点说明：

• Box的height="100%"确保它占满Card的整个高度，这样Button才能真正垂直居中。
• 给Card加padding可以让布局更美观，避免Button紧贴Card边缘。

额外小技巧 #

如果root类的alignItems: "center"没生效，直接给Card加margin: '0 auto'，就能强制Card在水平方向居中，效果完全一致。

内容的提问来源于stack exchange，提问作者Felipe Medeiros B.