木灵鱼儿

木灵鱼儿

阅读：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完整显示。

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

她的代码是这样的：

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

文章分类 vue 项目实战
文章标签 flexelementdialog垂直居中
木灵鱼儿

木灵鱼儿

发布了 562 篇文章获得点赞 0获得阅读 4568

版权申明

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

one
two
three
  1. 测试
    测试
    Google Chrome Windows 10

    看个结果也这么难吗

    回复
  2. aiai
    aiai
    Google Chrome MacOS

    看看解决方案

    回复
  3. 电饭锅撒旦法是大法官十多个的双方各
    电饭锅撒旦法是大法官十多个的双方各
    Google Chrome Windows 10

    梵蒂冈的双方各的双方各

    回复
  4. 3455555
    3455555
    FireFox Windows 10

    看看解决方案

    回复
  5. jhnbest
    jhnbest
    Google Chrome Windows 10

    看看解决方案

    回复
  6. f
    f
    Google Chrome Windows 10

    看

    回复
  7. a
    a
    FireFox Windows 10

    看看

    回复
  8. ddl
    ddl
    Google Chrome Windows 10

    看看

    回复
  9. 豆沙色
    豆沙色
    Google Chrome MacOS

    看看解决方案

    回复
  10. hh
    hh
    Google Chrome Windows 10

    看看

    回复

关于作者

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

相关文章

scss 自动生成margin和padding的classscss 自动生成margin和padding的class
深度合并对象的方法深度合并对象的方法
vue 过滤器 驼峰与短横线相互转换的方法vue 过滤器 驼峰与短横线相互转换的方法
利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题

目录树