Skip to content

re: How to center things in CSS 💘 VIEW POST



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

  <div id="object"></div>
  <div>Hello World!</div>
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.


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


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.


code of conduct - report abuse