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

image.png

遇到這問題，我們應(yīng)該怎么來解決呢。

新建一個(gè)style 不加scope 就可以

<template>
<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center
  >
 
  <span>需要注意的是內(nèi)容是默認(rèn)不居中的</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中遮罩的滾動(dòng)條*/
    overflow: hidden;
}
</style>

看效果圖，完美解決了

image.png