引人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
