.el-dialog弹窗垂直居中（重点：：兼容IE）

引人el-dialog显示是不垂直居中的。

image.png

遇到这问题，我们应该怎么来解决呢。

新建一个style 不加scope 就可以

<template>
<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center
  >
 
  <span>需要注意的是内容是默认不居中的</span>

</el-dialog>

</template>

<Script>
data(){
retunr{
centerDialogVisible:true,
}
}
</Script>

<style>



.el-dialog{
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
.el-dialog .el-dialog__body{
    max-height: 100%;
    flex: 1;
    -ms-flex: 1 1 auto; /* 兼容IE */
    overflow-y: auto;
    overflow-x: hidden;
}

.el-dialog__wrapper {
    /*隐藏ie和edge中遮罩的滚动条*/
    overflow: hidden;
}
</style>

看效果图，完美解决了

image.png