Почему страница переполняется по осям x и y, а также не центрируется по вертикали?

Question

Итак, я должен выровнять компонент в стиле <H4> по центру страницы с помощью гибкого блока, но он не работает. Я также пробовал margin:0 auto, но он только выровнял H4 по горизонтали

Также я пытаюсь понять, почему страница переполняется?

import React from "react";
import {
  IconButton,
  Drawer as MUIDrawer,
  ListItem,
  ListItemI
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import styled from "styled-components";

const H4 = styled.h4`
  font-size: 30px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: lightblue;
  letter-spacing:2px
`;

export default function home() {
  return (
    <div style={{ display: "flex", width: "100vw", height: "100vh",margin:"0",padding:"0" }}>
      <IconButton style={{ position: "absolute", right: "0" }}>
        <MenuIcon />
      </IconButton>
      <H4
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        This is Home Page
      </H4>
    </div>
  );
}

Answer 1

justifyContent и alignItems предназначены для выравнивания дочерних элементов, а не самого элемента. Попробуйте alignSelf: "center".