Simplify Your Flexing

Center Children Vertically & Horizontally

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>

/* Parent Takes Up Screen Width & Height*/
html, body, main {
  width: 100%;
  height: 100%;
}

main {
  display: flex;
  /* Will Wrap On Smaller Screens */
  flex-wrap: wrap;
  /* Center On X & Y Axis */
  place-content: center;
}

Read More About place-content