.middle{
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
分析:
top:50%; left:50%;会使元素的左上角处于定位的中间,
transform:translate(-50%,-50%)是相对于容器本身的宽高分别向左,向上移动50%;这样一来,整个元素
就垂直水平居中了