4 ms·
and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add inset:0rem; margin: auto; it will center vertical and horizo
by keithnz 5y ago
and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add
inset:0rem;
margin: auto;
it will center vertical and horizontal it without having to translate it
courtesy of Kevin Powell - https://www.youtube.com/watch?v=HOM47v73yG8 https://www.youtube.com/watch?v=HOM47v73yG8 ( who I've found to be an amazing resource for learning all kinds of CSS info )
- lifthrasiir 5y agoNote that inset is a very recent introduction, only supported by Firefox 66+, Chrome 87+ and Safari 14.1+ (14.5+ in iOS). It will take quite a while to use it without thinking.
- FractalHQ 5y agoWhy not you polyfill it if you care enough to hesitate?
- chrismorgan 5y agoTooling can take care of these things, letting you write in the logical property style and translating it into the physical property style for compatibility. e.g. https://github.com/csstools/postcss-logical https://github.com/csstools/postcss-logical
- leepowers 5y agoNote - this method requires the element have a height defined; or a height derived from a declaration like `aspect-ratio` That's because `inset: 0rem` is equivalent to `top: 0rem; right: 0rem; bottom: 0rem; left: 0rem;` - which is a well know technique to force 100% height. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset [2] https://codepen.io/leepowers/pen/KKmgpwB https://codepen.io/leepowers/pen/KKmgpwB