Exactly, "widely known". Like, CSS is so convoluted to work with, that it's become its own branch of science where people have to research, publish, and circulate these magic concocted strings just to do basic layout tasks like evenly-distributing elements or vertical centering, instead of being able to just RTFM and vertically center something in one simple, easy-to-remember command. It's completely non-intuitive why I would want to make something a "table-cell" or why I would want to "translateY(-50%)" to accomplish vertical centering. And that's only barely scratching the surface of UI design.

Doing something like "if(browser width:height ratio is less than 3:2) keep a video in an aspect ratio of 3:2 and vertically-center it on the screen, else make the video width 100% and crop the video evenly on the top and bottom" is arguably a potentially common design task, yet a convoluted headache in CSS. Now add to that, "place an 'X' button in the upper right corner of the video, leaving a 20-pixel margin", and you're downright waging war with your browser.

Both of your examples don't work in all situations, by the way.