木灵鱼儿

木灵鱼儿

阅读:4568

最后更新:2021/01/23/ 10:32:08

关于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完整显示。

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

她的代码是这样的:

此处内容已隐藏回复后方可阅读。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 4568

相关文章

目录树