问如何在材质界面中在屏幕中间创建一个排版？

EN

import React, {Fragment, useState} from 'react'
import {createStyles, Grid, makeStyles, Typography} from '@material-ui/core'
import DrawerC from '../components/drawer'
import AppbarC from '../components/appbar'
import background from '../assets/background.mp4'

const useBackgroundStyle = makeStyles((theme)=>createStyles({
    root:{
        width: '100%',
        height: '100%',
        overflowX: 'hidden'
    },
    typographyMiddle:{
∎∎∎∎∎∎ SOME STYLING TO POSITION THE TYPOGRAPHY IN THE MIDDLE ∎∎∎∎∎∎
        position: 'absolute',
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
    },
    [theme.breakpoints.down('md')]:{
        root:{
            width: window.screen.width,
            height: window.screen.height,
            objectFit: 'cover',
            objectPosition: '20% 0%',
            overflowX: 'hidden'
        }
    }

}))

export default function () {
    const backgroundStyle = useBackgroundStyle()
    const [drawerState, handleDrawerState] = useState(false)
    const [datepickerState, handleDatepicker] = useState(false)

    return(
        <Fragment>
        <AppbarC handleDrawerState={handleDrawerState} handleDatepicker={handleDatepicker} />
        ∎∎∎∎∎∎ THIS IS THE PART OF THE CODE THAT MATTERS ∎∎∎∎∎∎
        <video autoPlay='autoplay' muted loop id="myVideo" className={backgroundStyle.root}>
            <source src={background} type="video/mp4" />
        </video>

        <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
            style={{ minHeight: '100vh' }}
            className={backgroundStyle.typographyMiddle}
        >
            <Typography className={backgroundStyle.typographyMiddle}> THIS IS A TEST </Typography>
        </Grid>
        ∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
        <DrawerC state={drawerState} handleDrawerState={handleDrawerState} />
    </Fragment>
    )
}