vertiacal-centering-flexbox

by Xiaoke Mao

HTML

<main>
  <h1>Am I centered yet?</h1>
  <p>Center me, please!</p>
</main>

CSS

* {
  margin: 0
}

body {
  display: flex;
  min-height: 100vh;
}

main {
  padding: 1em 2em;
  margin: auto;
  box-sizing: border-box;
  background: #655;
  color: white;
  text-align: center;
}

h1 {
  margin-bottom: .2em;
  font-size: 150%;
}

body {
  background: #fb3;
  font: 100%/1.5 sans-serif;
}