Just to add, I usually give the flex container the responsibility of aligning its children. E.g.
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.
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.