DEV Community

Daniel Sokil
Daniel Sokil

Posted on

2

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)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay