背景图全屏水平垂直居中的方法

在开发登录页面或者其他全屏背景图的页面，需要背景图全屏并且水平垂直居中，根据浏览器窗口大小自适应。尝试多种方法后，使用了最简单的两行代码搞定。

/* 要想实现全屏高度需要单独设置 html 和 body 的高度 */
html, body {
  height: 100%;
}

.box {
  width: 100%;  /* block 元素 width 自动100%，可省略 */
  height: 100%;
  /* 设置最小宽度和高度 避免垂直居中元素 超出浏览器窗口宽高*/
  min-width: 1000px;
  min-height: 800px; 
  /* 以下两行代码 */
  /* center 是background-position 的值，意为 水平垂直居中 */
  background: url('../../assets/bg.jpg') center no-repeat; 
  /* 如果背景图宽高不够，该属性可实现全尺寸 */
  background-size: cover; 
}

涉及知识点：

1. 元素的高度默认继承父元素，因此需要单独设置html和body的高度（如果box元素外有父元素，也需要设置高度100%）
2. 背景的知识，background简写形式，背景图定位，不重复，以及背景图尺寸cover，意为拉伸背景实现全尺寸覆盖。