diff --git a/Perfectly centering pixels is tricky.md b/Perfectly centering pixels is tricky.md new file mode 100644 index 0000000..c3b2cb0 --- /dev/null +++ b/Perfectly centering pixels is tricky.md @@ -0,0 +1,11 @@ +# Perfectly centering pixels is tricky + +To perfectly center a container (like a `
`) inside another container, both containers' sizes must have the same parity, in other words, both sizes must be either even or odd, in the direction of centering. + +Same thing happens if many containers are nested, and each of them need to be centered across its parent, they all need to be even or odd. + +Font makes things trickier. Let's suppose you want to center vertically a text inside an even container, and you may think that choosing an even `font-size` will do the trick, but if you choose a size like `14px` and a `line height` different than `1` or `2` (both options are unpleasant in most cases), then text's effective height will be odd, and text `height` parity will mismatch with its parent and will be impossible to center. + +## What led to learning this + +- Podcast: Full Stack Radio: 135: Lessons Learned Building Tailwind UI