Have you ever wondered what happens with a container with a width of 10 pixels and a div inside of it that has a width of 3 pixels and a margin of 0 auto? It sounds like a contrived example, but these sorts of dilemmas are common in a world of mobile-fluid flexbox layouts. This morning I got down to business and figured out what happens with “extra” pixels. The tl;dr is this: in a horziontal situation, the left side of the aligned item gets the extra pixel. In a vertical situation, the top side gets the extra pixel. This feels consistent with CSS’s preference for top-left in things like border-radius.

As I mention in the gist, this discussion is irrelavent on retina screens; since a CSS 1px equals two actual pixels on a retina screen, a retina screen can render any centered layout in perfect symmetry.