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;.
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice.
Just to add, I usually give the flex container the responsibility of aligning its children. E.g.
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.Thanks!