CSS的五种居中方式

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

  父级{
  height: 100vh;		
  display：flex；
  justify-content：center；
  align-items：center；
  }

  子级{
    width：200px;
    height:200px;
    background-color:red;
	}

  父级{
  height: 100vh;		
  display：grid；
  }

  子级{
    width：200px;
    height:200px;
    background-color:red;
    align-self：center；
    justify-self：center；
	}

    .父级 {
	height: 100vh;
	display: grid;
}
    .子级 {
	width: 200px;
	height: 200px;
	background-color: #00FFFF;
	margin: auto;
}

 .父级 {
	height: 100vh;
	display: grid;
	place-items: center;
}
    .子级 {
	width: 200px;
	height: 200px;
	background-color: #00FFFF;
}