基础结构、样式
<body>
<div class="box" id="box"> 盒子 </div>
</body>
html,body {
<!--这里是为了获取浏览器的高度、方便于子元素设置基于父元素的百分比-->
height: 100%;
}
一、基于定位的方法
盒子宽高已知
方法1：需要宽高进行计算
body{
position：relative;
}
.box {
position: absolute;
<!--设置top,left,让盒子左上角居中 -->
top: 50%;
left: 50%;
<!--设置盒子往上移 height/2、左移 width/2 -->
margin-top: - height/2 px;
margin-left: - width/2 px;
}
方法2：无需计算
body{
position：relative;
}
.box {
position: absolute;
top：0；
left：0;
rigth:0;
bottom:0;
margin:auto;
}
优点：兼容性好
缺点：对自适应/动态计算宽高的盒子不友好
盒子宽高未知（自适应、动态）
body{
position：relative;
}
.box {
position: absolute;
<!--设置top,left,让盒子左上角居中 -->
top: 50%;
left: 50%;
<!--利用CSS3 transform中的translate(x,y)位移设置盒子往上移 50%、左移 50% (百分比相对于盒子)-->
transform: translate(-50%,-50%)
}
优点：盒子宽高可固定
缺点：兼容性差（ ie: 你们看我干嘛 ）
二、基于flex的方法
body {
display: flex;
justify-content: center;
align-items: center;
}
优点：不受盒子宽高影响（移动端主流）
缺点：兼容性差
三、基于JavaScript的方法
中心思想:（当前屏幕宽高-盒子宽高）/2
body{
position:relative;
}
let HTML = document.documentElement
winW = HTML.clientWidth,
winH = HTML.clientHeight,
boxW = box.offsetWidth,
boxH = box.offsetHeight;
box.style.position = "absolute";
box.style.left = (winW - boxW) / 2 + 'px';
box.style.top = (winH - boxH) / 2 + 'px';
优点：兼容性好
缺点：盒子宽高需固定（非主流）
四、基于Table Cell的方法
中心思想：其本是控制文本的水平垂直居中的
.父元素{
display:table-cell
vertical-align:middle;
text-align:center
<!--宽高不能是百分比-->
}
但我们可以把盒子变成文本（设置display:inline、inline-block）
body {
display: table-cell;
vertical-align: middle;
text-align: center;
/* 固定宽高 */
width: 500px;
height: 500px;
}
.box {
display: inline-block;
}
这也是一种方法，但少用（非主流）
