Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2020-04-04

老生常谈-居中

水平居中

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;
}

Comments

No Comments!