如何使对齐项目在 reactJS 中工作？

Question

我有 4 个盒子，我将它们用作组件，当我应用 justify-content:center 时，它会根据 with 将我的项目居中，但是当我尝试使用 align-items:center 时，它不起作用，更令人困惑的是，我制作了主体颜色teal，整个页面变成了蓝绿色，但是在开发人员工具中它显示我只有少量的高度，那么为什么整个页面都变成了蓝绿色呢？

import React from 'react';
import "./App.css"
function Myfunc(props){
    return(
        <div className="holder">
            <h1>{props.text}</h1>
        </div>
     );
}
export default Myfunc;

import React from "react";
import Myfunc from "./CSSexample";
function App(){
    return(
       <div className="container">
         <Myfunc text=""/>
         <Myfunc text=""/>
         <Myfunc text= ""/>
         <Myfunc text=""/>
       </div>
    );
}
export default App;

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.holder{
    background-color: crimson;
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: teal;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

Answer 1

尝试设置container的宽/高

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 100vh;
  width: 100vw
}