老生常谈-居中

水平居中

Text

p {
  text-align: center;
}

Blocks

/*flexbox*/
#mysection {
  display: flex;
  justify-content: center;
}

/*margin*/
#mysection {
  margin: 0 auto;
  width: 50%;
}

垂直居中

Text

#mysection {
  display: flex;
  align-items: center;
}

水平垂直居中

/*flex*/
#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*grid*/
body {
  display: grid;
  place-items: center;
  height: 100vh;
}