Как центрировать контейнер / элемент в сложной сетке с пользовательским интерфейсом материала

Question

https://codesandbox.io/s/wonderful-fog-yvvjp

Я пытаюсь расположить компонент «Аватар» и «Типография» под ним так, чтобы он был идеально в центре левой части компонента «Бумага». После его проверки с помощью DevTools кажется, что компонент item / container, в котором размещены Avatar и Typography, не полностью занимает пространство своих родительских контейнеров. Я попытался установить его высоту до 100%. Я также попытался установить flexGrow на 1, а также. Как бы я выполнил sh вертикальное и горизонтальное центрирование для компонента «Типография аватара»?

import React from "react";
import "./styles.css";
import {
  Container,
  Typography,
  Paper,
  makeStyles,
  Avatar,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    height: "15vh"
  },
  avatarSection: {
    height: '100%'
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <Container className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container direction="row">
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            className={classes.avatarSection}
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

Answer 1

Если я вас правильно понимаю, у вас есть дополнительные классы, которые не нужны.

Вы можете добиться вертикального выравнивания с помощью приведенных ниже кодов :

const useStyles = makeStyles(theme => ({
  paper: {
    height: "15vh"
  },
}));

export default function App() {
  const classes = useStyles();

  return (
    <Container>
      <Paper>
        <Grid className={classes.paper} container alignItems="center" direction="row">
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

Answer 2

вам просто нужно установить высоту контейнера сетки на 100%.

        <Grid style={{ height: "100%" }} container direction="row">

Answer 3

попробуйте этот документ: {display: 'flex', alignItems: 'center'}

Answer 4

На внешнем компоненте Grid присвойте ему класс css с height:'inherit' Также добавьте опору alignItems="center"