DEV Community

Discussion on: How to center things in CSS 💘

Collapse
 
marklchaves profile image
mark l chaves • Edited

Nice.

Just to add, I usually give the flex container the responsibility of aligning its children. E.g.

<section>
  <div id="object"></div>
  <div>Hello World!</div>
</section>
section {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* To vertically align all items added to the flex--not just one. */
}

Then any time you add another child, they will automagically align in the centre. In the example above, the children will align in one column because I specified flex-direction: column;.

Demo on CodePen.


Question @mindset ,

Why define the .element class twice on top of each other? Is there an advantage to that?

Here's how I would have done it.

Collapse
 
mindset profile image
Jayesh Tembhekar âš¡

Not an advantage, just to separate main transform properties for easy understanding 😅

Collapse
 
marklchaves profile image
mark l chaves • Edited

Ok. Cool. I typically don't see that style unless it's a mistake. That's why I asked.

If you want to be more OO-like, I would delegate alignment to another class. Then add that class to the class list in the HTML. Like what I've shared with you above. Similar to multiple inheritance.

Then .demo-box and .centre-me are reusable.

Thanks!