// dialog上下左右居中
.el-dialog{
display: flex;
flex-direction: column;
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{
flex:1;
overflow: auto;
}
视觉验收的时候提出要求dialog上下左右均居中,上面代码设置后,chrome生效。但在IE中,发现弹框样式出错。原先以为是height、width的问题。但全局中,各弹框高度、宽度均不一致,写多个css适配显然不现实。但之后,将后四行代码去掉之后,IE可以兼容。
.el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}