Set Material-UI vertical and centered aligned Grid items in layout - reactjs

Question

I'm pretty new to Material-UI and I would like to have this basic implementation with Grid components:
But so far I'm unable to center the Grid items correctly. I tried different approaches but none of them worked. This is my code so far:
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column">
<Grid item xs={11}>
Some text
</Grid>
<Grid item xs={11}>
Some text
</Grid>
</Grid>
</Grid>
Thanks in advance for any help.

Answer 1

You need to use some more of the Material UI components to achieve your goal. You need to use the Paper and Typography components and the makeStyles function. I set up a demo here and the code should look something like this:
import "./styles.css";
import Grid from "#material-ui/core/Grid";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Paper from "#material-ui/core/Paper";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
// Set your styles for the paper component here:
const paperStyles = makeStyles((theme) => ({
root: {
margin: "15px",
height: "150px",
padding: "20px",
backgroundColor: "#cfcfcf"
}
}));
export default function App() {
// Call your styles function:
const paperClasses = paperStyles();
return (
<div className="App">
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column">
// Use the paper component here and assign paperClasses.root to the className prop:
<Paper className={paperClasses.root} item xs={11} >
// Put your other Grid components inside of the paper component:
<Grid item xs={11}>
// Use the Typography component for your text with the align prop set to "left":
<Typography variant="subtitle1" align="left">
Some text
</Typography>
</Grid>
</Paper>
<Paper className={paperClasses.root} item xs={11}>
<Grid item xs={11}>
<Typography variant="subtitle1" align="left">
Some text
</Typography>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
);
}

Answer 2

If I understood your question, I think this should fix it, just add alignContent='center' and check props of Grid
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column" alignContent='center' >
<Grid item xs={11}>
Some text
</Grid>
<Grid item xs={11}>
Some text
</Grid>
</Grid>
</Grid>