如何仅使用Material-UI原生能力实现表单的水平垂直完全居中？

你当前代码无法实现垂直居中的核心原因是外层Grid容器没有指定最小高度，默认高度等于内容高度，所以alignItems="center"的垂直居中是基于内容高度生效，而非基于整个视口高度生效。

以下是修改后的纯Material-UI实现代码，完全不需要额外引入自定义CSS文件：

import React, {Component} from 'react'
import {Button, TextField, Paper, Grid, Box} from '@material-ui/core'

class Login extends Component {
    render () {
        return (
            <Grid 
                container 
                direction="row" 
                alignItems="center" 
                justify="center"
                style={{ minHeight: '100vh' }}
            >
                <Paper elevation={3} style={{ padding: '2rem' }}>
                    <form>
                        <Box mb={2}> 
                            <TextField id="outlined-username" variant="outlined" label="Username" fullWidth/>
                        </Box>
                        <Box mb={2}>
                            <TextField id="outlined-password" type="password" variant="outlined" label="Password" fullWidth/>
                        </Box>
                        <Box display="flex" justifyContent="space-between" alignItems="center">
                            <Button variant="contained" color="primary">Login</Button>
                            <Button color="secondary" href="Register.js">Register</Button>
                        </Box>
                    </form>
                </Paper>
            </Grid>   
        )
    }
}

export default Login

修改说明 #

• 给外层Grid添加minHeight: 100vh样式，让容器占满整个屏幕高度，此时alignItems="center"即可实现基于屏幕的垂直居中，此处直接使用React行内样式，没有引入外部自定义CSS，完全符合纯Material-UI开发的要求，你也可以根据需求替换为Material-UI内置的makeStyles/styled方案管理样式，原理一致。
• 补充了Paper内边距、TextField全宽属性、表单元素间距，都是通过Material-UI组件自带的属性/行内样式实现，无需额外自定义CSS。
• 调整了两个TextField的id值，避免HTML id重复的语义错误，原代码中使用的表单相关组件均为Material-UI官方推荐用法，符合开发规范。
• 原a标签替换为Material-UI内置的Button组件，所有交互样式由框架自带，避免手写样式带来的复杂度。

内容的提问来源于stack exchange，提问作者K.Nes