面试题：让一个盒子在整个页面水平和垂直都居中的位置? 如果不知道盒子的宽度和高度如何处理?

CSS

//=>使用定位：需要知道盒子的具体宽高
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    width: 200px;
    height: 100px;
    background: red;
}

//=>使用定位：不需要知道盒子的具体宽高(不兼容IE低版本浏览器)
.box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 100px;
    background: red;
}

//=>使用CSS3的flex伸缩盒模型（不兼容）
html {
  height: 100%;
}

body {
   display: flex;
   height: 100%;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
}

.box {
   width: 200px;
   height: 100px;
   background: red;
}

JS

//=>JS中只要获取到当前盒子具体的LEFT/TOP值即可
//=>一屏幕的宽高-盒子的宽高，最后除以2，获取的值就是它应该具备的LEFT/TOP（这个值可以让他处于页面中间）
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
var boxW = box.clientWidth;
var boxH = box.clientHeight;
box.style.left = (winW - boxW) / 2 + 'px';
box.style.top = (winH - boxH) / 2 + 'px';