Today I Learned

CSS - Element not perfectly centered

Sometimes you can notice that your element is not perfectly centered, doesn’t matter what centering method you use.

Most likely the reason is:

  • one element has even amount of pixels in size
  • second element has odd amount of pixels

Example:

  • Centering 40px element in 45px container
  • Centering 41px element in 46px container

Browser cannot split pixels in half!

image Link with examples

Setting half pixels won’t solve this issue

Half pixels only works for some browsers

Half pixels example