关于element的dialog垂直居中的完美解决方案

element的dialog弹窗，默认不是垂直居中的，只是水平居中，但是他有一个很好的地方，就是当窗口的高度小于dialog的高度时，他会有滚动条，并且可以完整的显示dialog，算是一个非常不错的兼容方式。

但是当我们对dialog进行css调整为垂直居中时，往往会使用下面两种样式：

绝对定位：

.el-dialog__wrapper {
   position: relative;
   .el-dialog {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
}

flex：

.el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

注意，在使用dialog垂直居中时，他的Attributes中top值需要设置为0，当然也可以手动css强行设置为0，看自己选择

两种方式都行，但是都有缺点。

绝对定位使用了transform，这就会产生一个隐性的问题，当el-dialog里面有fixed定位是，就会发生定位失效的情况，所以，泛用性可能还是差一些，但是如果没有fixed定位，这个写法还是蛮好的。

flex的话，居中没问题，但是和绝对定位都有一个共同的问题，就是当页面高度小于dialog高度时，无法通过滚动条将dialong完整显示。

一时间也没想到啥解决方案，就一直放着，昨天跟同事聊，跟他讲了这个问题，然后她就去研究了，最后研究出来，我看了下，又百度了一些资料，大概明白是怎么回事。

她的代码是这样的：