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垂直居中
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

全部评论 235

  1. 111
    111
    Google Chrome MacOS
    我看看
    回复
  2. 111
    111
    Google Chrome Windows 10
    学习
    回复
  3. ra
    ra
    Google Chrome Windows 10
    求知
    回复
    1. mindbin
      mindbin
      FireFox Ubuntu
      @ra看看kkkk
      回复
  4. 老徐
    老徐
    Google Chrome Windows 10
    学习下
    回复
  5. 111
    111
    Google Chrome Windows 10
    学习
    回复
  6. 121
    121
    Google Chrome MacOS
    学习
    回复
  7. 111
    111
    Google Chrome Windows 10
    学习
    回复
  8. 1
    1
    Google Chrome Windows 10
    学习
    回复
  9. w
    w
    Google Chrome Windows 10
    学习
    回复
  10. 1
    1
    FireFox MacOS
    学习
    回复
  1. 1
  2. ...
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11
  8. 12
  9. 13
  10. ...
  11. 23

相关推荐

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

木灵鱼儿 1392 2 0
vant 自动引入 dialog

封装一个dialog弹窗组件

木灵鱼儿 2111 0 2
dialog 弹窗组件

flex布局知识补充

木灵鱼儿 2480 0 0
css flex

关于 element table多选里面实现单选的偷懒做法

木灵鱼儿 4766 0 0
vue element table

关于element el-input 输入的值需要转number的问题

木灵鱼儿 4473 0 0
number vue element

关于element table合并格子的思路

木灵鱼儿 2563 1 0
vue element table

关于element侧边栏导航一些新想法

木灵鱼儿 3120 0 0
vue element 侧边栏导航

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

木灵鱼儿 4670 0 0
element dialog Tooltip

element input异步校验+自定义错误提示

木灵鱼儿 9972 0 1
vue element input

element input表单验证数字类型方法大全

木灵鱼儿 9134 106 0
vue element 浮点数
获得点赞 23
文章被阅读 151,663
最后更新 21-01-23 10:32:08

目录

目录