DEV Community

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

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.

urielbitton profile image
Uriel Bitton Author

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

pavelloz profile image
Paweł Kowalski

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

louislam profile image
Louis Lam

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

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.

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 :)