vertical-centering-abs

by Xiaoke Mao

HTML

<main>
  <h1>Hello World!</h1>
  <p>
    Center me, please!
  </p>
</main>

CSS

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em 1.5em;
  box-sizing: border-box;
  background: #655;
  color: white;
  text-align: center;
}

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

p {
  margin: 0;
}

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