Vertically-Center Anything

No, it’s not black magic, you really can center elements vertically. You can do this with flexbox…

  1. html,
  2. body {
  3.   height: 100%;
  4.   margin: 0;
  5. }
  7. body {
  8.   -webkit-align-items: center;
  9.   -ms-flex-align: center;
  10.   align-items: center;
  11.   display: -webkit-flex;
  12.   display: flex;
  13. }

…and also with CSS Grid:

  1. body {
  2.   display: grid;
  3.   height: 100vh;
  4.   margin: 0;
  5.   place-items: center center;
  6. }

Want to center something else? Vertically, horizontally…anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.

Note: Watch for some buggy behavior with flexbox in IE11.

Demo