关于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完整显示。
一时间也没想到啥解决方案，就一直放着，昨天跟同事聊，跟他讲了这个问题，然后她就去研究了，最后研究出来，我看了下，又百度了一些资料，大概明白是怎么回事。
她的代码是这样的：
此处内容已隐藏回复后方可阅读。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 241
jay
Google Chrome Windows 10zzz
Google Chrome MacOSself
Google Chrome MacOStrue
Google Chrome Windows 10justcoding
Google Chrome Windows 7