DEV Community

Daniel Sokil
Daniel Sokil

Posted on

Simplify Your Flexing

Center Children Vertically & Horizontally

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
Enter fullscreen mode Exit fullscreen mode
/* 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;
}
Enter fullscreen mode Exit fullscreen mode

place-content
Read More About place-content

Top comments (0)