Center element vertically and horizontally using (flex and margin:auto)

This technique requires to set parent element as `display:flex` and child margin set to auto.

by Konstantin Rouda

HTML

<div class="parent">
  <h1 class="child">Hello I'm header text</h1>
</div>

CSS

/*Actual Style*/

/*
  1. First thing that needed for this technique to work
*/
.parent {
  display: flex; /*[1]*/
  max-width: 100%;
  height: 50vh;
  border: 1px solid;
}

/*
  1. Second thing that needed for this technique to work
*/
.child {
  margin: auto; /*[1]*/
  max-width: 40rem;
  min-height: 10rem;
  background: cornflowerblue;
  color: #f1f1f1;
}































/*Not relevant Style*/

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  /*using fluid typography (https://goo.gl/o9sRyq)*/
  font-size: calc(16px + (20 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #3a3d40;
  margin: 0;
  padding: 1rem;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}