发布于 2020-04-04

老生常谈-居中

css

几种居中的方法

水平居中

Text

p {
  text-align: center;
}

Blocks

image

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

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

垂直居中

Text

image

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

水平垂直居中

image

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