Align content horizontally and vertically center

index.html

<div class="parent">
  <section>
    <h1>Center elements</h1>
    <p>Center elements vertically or horizontally using following css</p>
    <pre>
      <code>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
      </code>
    </pre>
  </section>
</div>

style.css

/* You may need to reset margin of body  */
body {
  margin: 0;
}

/* Horizontally and vertically center the content of its child */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}