loading...

Simplify Your Flexing

danielsokil profile image Daniel Sokil ・1 min read

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;
}

place-content
Read More About place-content

Discussion

markdown guide