DEV Community

loading...

Simplify Your Flexing

Daniel Sokil
・1 min read

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

Discussion (0)