3 ms·
Maybe I missed it, but position: absolute, left: 50%, transform: translateX(-50%) is usually my go to.
by 4death4 3y ago
Maybe I missed it, but position: absolute, left: 50%, transform: translateX(-50%) is usually my go to.
- infensus 3y agoCentering like this can make your element blurry on non-hidpi screens, because transforms are not snapped to the pixel grid like layout properties, and 50% can sometimes land on a subpixel
- 4death4 3y agoIs this still relevant? I thought browsers had proper support for sub-pixels now.
- infensus 3y agoI think this was exclusive to Chrome. https://issues.chromium.org/issues/40431598 https://issues.chromium.org/issues/40431598 Seems like they managed to kinda fix it in some cases, but some of the reproductions provided in the issue tracker are still working, so I would be careful
- wruza 3y agoWhat do you do when position isn’t absolute?
- 4death4 3y agoThen I use one of the approaches listed. However, I find that usually I want absolute positioning when centering either horizontally or vertically.
- hlammers 3y agoI was kinda surprised that this method wasn't included in the article. While I use flexbox for centering most of the time, I still find myself resorting to the absolute positioning way sometimes.