经常会使用background-position:left center,将背景图片垂直居中。浏览器渲染页面的最小单位是像素,所以某些情况下即使定义了“center”,实际效果也未必是垂直居中。

例如:

  • 元素:高16px;
  • 背景图片:高13px;
  • 定义background-position:left center

实际效果如下图:
CSS背景图片居中的细节
可以清晰的看到背景图片距上边框“2px”,距下边框“1px”。上图是在Chrome下测试结果,其它浏览器也是如此,只不过是有的距上边框“1px”,距下边框“2px”。

解决方案

若想实现100%垂直居中,则“元素高度 - 背景图片高度”可以被2整除,所以上例可以将元素高度设置为“17px”,或将背景图片高度更改为“12px”。

相关文章:

  • 2021-11-24
  • 2022-02-07
  • 2021-12-16
  • 2022-12-23
  • 2021-07-26
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-06-26
  • 2022-02-07
  • 2022-02-07
  • 2022-02-07
  • 2021-11-30
相关资源
相似解决方案