DEV Community

Discussion on: My 5 favorite CSS tricks I learned this year

Collapse
ozanbolel profile image
Ozan Bolel • Edited on

I wouldn't recommend vertically centering a div by position absolute. Often times browsers render it blurry. You should use flexbox instead, it's easier and reliable. If you are not able to use flexbox due to browser support, in my opinion, display table is a better solution.

Collapse
urielbitton profile image
Uriel Bitton Author

why do they render absolute position blurry. Do you have a sources to back this up?

Collapse
pavelloz profile image
Paweł Kowalski

I dont know about blurriness, but flexbox is the way to go.

Collapse
louislam profile image
Louis Lam

It is not caused by position absolute. But css transform makes elements blurry in some conditions.

stackoverflow.com/questions/320345...

Collapse
rshelnutt profile image
Rob • Edited on

This is because of subpixel rendering from the browser when using the transform property - it's actually a longstanding "issue" faced by front-end devs for years (albeit, working as intended). When working in subpixel ranges (1.875px, 10.5px, etc) with transforms, the browser calculates the draw differently than flex.

This method works ok for images and other media elements that will receive some sort of rendered anti-aliasing from the browser naturally, but when it comes to pixel perfect UI elements (borders, buttons, fonts etc) that anti-aliasing is performed on the entire element, again, when it shouldn't be. Some tricks like using the transform z-scaling, transform rotate with fractional degrees, and backface-visibility:hidden can sometimes mitigate the issue, but its pretty hit-or-miss and isn't always supported across all browsers.

TLDR; Use transformation centering for media elements and select structure layouts, it's great to have in your toolkit. Items containing UI elements are more safely centered vertically with flex.

Collapse
urielbitton profile image
Uriel Bitton Author • Edited on

youre right flexbox works better. But i learned this trick a while ago and its helped me a lot so thats why I mentioned it :)