This series is about all the neat little HTML/CSS/JS tricks I found and keep finding. Most of these are things that initially took me quite a long ...
For further actions, you may consider blocking this person and/or reporting abuse
I'd stick with flexbox, it's the best choice for now. Using absolute positioning can introduce more bad things, than good.
EDIT:
Here's a neat little game, which can teach you flexbox in no time.
flexboxfroggy.com
Yes I agree, but this is meant for situations where flexbox doesn't work, it's pretty rare but it happens. This method is more of a last resort than "use this intstead of flexbox and automatic margins". I'll add a little note to the post.
EDIT : It's particularly useful for centered absolute pseudo elements.
Thanks, it really helped me.
I'm glad it could be helpful :)
Other than the modal reason, why would margin 0 auto or flexbox not work?
If it is not working would that not hint to your markup and styling being over complicated to begin with?
Tricks/Hacks are fun and but it usually hides the problem within.
I agree, if I can change the html to fit
margin: 0 auto;or flexbox I will do it. However, I'm working on a beast of a website and a lot of content is generated via freemarker and changing the html in some of those files could create huge regressions throughout the website and as deadlines approach, you might not be able to check every knook and crany of the website. So, in my opinion, hacks are a necessary evilThis is way back OG but before transform we had to use negative margins
This kind of centering is still useful when you need that element to be outside of the document flow, like overlay or modal. In any other case, use flex. Good tip anyway :)
Yeah definitely! :)
Thanks a lot, I'm looking for this.
I fought with this kind of centering approach in the beginning of my Web journey so much that just seeing this translate()'s gives me headache. (:
Sometimes, when flexbox and
margin: 0 auto;doesn't work, a little translate is necessary :)Can I center the background in the same way as on this forum for example - esporttalk.org/ ??
Good Question, the background on this website seems to be a full width gradient and not an element.