网上看到有很多方式，这里记录一下我用起来顺手的几种方式，这里敲黑板做笔记，哈哈~~
<div id='container'><div class='middle'></div></div>
首先预备工作，假设这是登录界面，那通常会涉及到背景图片撑满屏幕
<style>html,body{height:100%;}#container{width:100%;height:100%;position:fixed;top:0;left:0;background-color: aqua; //这里用背景色充当背景图片}</style>
明显看到会出现滚动条；可以用两种方式让滚动条消失：
html,body{height:100%;/* overflow: hidden; */ //方式一margin:0;padding: 0;}
好啦下面，开始进入正题，实现 class=‘middle’ 这个div盒子的垂直居中显示
1.前提是设置好div盒子的高度和宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平居中 */margin: 0 auto;}
（1） position：absolute
方式一：元素自身已知宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute;top:50%;left:50%; margin: -50px 0 0 -50px;}
方式二：元素自身未知宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);}
方式三：
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute; top:0;left:0;right:0;bottom:0;margin:auto;}
（2）display:flex
方式一：
#container{width:100%;height: 100%;/* 子元素middle垂直居中 */display: flex;justify-content: center; // 水平居中align-items:center;// 垂直居中}
方式二：
#container{width:100%;height: 100%;display: flex;}.middle{width:100px;height:100px; background-color:tomato;margin:auto;}
（3）display：table；display：table-cell；display:inline-block;
<div id='container'><div class='middle'><div class='inner'></div></div></div>
#container{width:100%;height: 100%;display: table;}.middle{width:100px;height:100px; background-color:tomato;/* 这边会发现 middle 的背景色会铺满整个屏幕 */display:table-cell;vertical-align: middle;text-align: center; }.inner{width:50px;height:50px;background-color: yellow;/* 实现水平垂直居中*/display: inline-block;}
OK~~~方法还有很多种，以上是我熟悉的，后面碰到别的情况再做记录。
