DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.