From dfc0087808a0497e60297b2188a484e91d4a719a Mon Sep 17 00:00:00 2001 From: Marco D'Agostini Date: Tue, 4 Aug 2020 12:47:54 -0500 Subject: [PATCH] new: Perfectly centering pixels is tricky --- Perfectly centering pixels is tricky.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 Perfectly centering pixels is tricky.md 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