6 ms·
Not too long ago I saw the best simple solution to vertical centering. It was so obvious: position: absolute; top: 50%; transform: translateY(-50%); Transla
by etler 13y ago
Not too long ago I saw the best simple solution to vertical centering. It was so obvious:
position: absolute;
top: 50%;
transform: translateY(-50%);
Translate is processed at the end, meaning it is based on the final element height. This means it works with any element, even dynamic heights. Of course it only works on relatively new browsers, but translate is well accepted and on the path to being ubiquitous. The style is also easy to understand and isn't hacky.
I think the parts of CSS that are designed are well designed (considering how hard the problem space is). However, lots of CSS just wasn't designed at all. It was just everyone throwing in their conflicting specs and implementation without any coordinating. But that was pretty much all of the web. All things considered, I think we're not too bad off considering how crazy things were in the early days.
Also, any time anyone complains about CSS, I just show them some pre-css code with `<font>` tags and `bg-color` properties and insane tables. That gets them to shut up pretty quickly. :)
- coldtea 13y ago>Also, any time anyone complains about CSS, I just show them some pre-css code with `<font>` tags and `bg-color` properties and insane tables. That gets them to shut up pretty quickly. :) Nothing is insane about "tables". It behaves as a classical grid based layout system, even though it was not intended as such. That's why it was such a good fit. As for the "font" tags and bg-color properties, nothing strange about them either -- at least nothing worse than a style="" tag. Besides, that's the formatting part, which CSS is quite good add, we're talking layout here.
- etler 13y agoIt's not that bad when combined with other methods of positioning, but remember, back then there was nothing else available, meaning you had to use tables for everything. Of course, the biggest problem was the lack of classes, meaning you had to redefine every style on every element.