Hacker News Reader

Comment by keithnz | Hacker News Reader

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 ( who I've found to be an amazing resource for learning all kinds of CSS info )

View on HN

Note 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.

Why not you polyfill it if you care enough to hesitate?

Tooling 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

Note - 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

[2] https://codepen.io/leepowers/pen/KKmgpwB

Reply on news.ycombinator.com