html - 如何使用填充垂直/水平居中 CSS 背景图像

Question

我用它来垂直和水平居中:

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
}

这行得通，但现在我正在尝试添加填充。我想在所有边上都有 10px 或 20px 的填充，所以对于移动设备它有一些填充。我试过这个:

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
  background-origin: content-box;
  padding: 20px;
}

但是右侧和底部越过视口(viewport)，因此发生滚动并且它不再完全居中。我也尝试过使用 margin 。想知道如何让它工作。如果可能，我想使用 CSS 背景图像，而不是 <img> .

Answer 1

添加box-sizing:border-box;

html {
  width: 100%;
  height: 100%;
  background: url(http://www.fillmurray.com/460/300) center center no-repeat;
  background-origin: content-box;
  padding: 20px;
  box-sizing:border-box;
}