介绍
在使用element-ui的时候,遇到了一个很棘手的问题,el-dialog弹窗无法强制居中,但是业务的需求是需要居中的要求,使用了很多办法
例如:修改遮盖层,自定义class类名去调。
but!
都没有任何卵用!!
剩下最后一个方法!!
直接修改源css,定义全局css,迭代类选择器,进行对element-ui里面的css样式进行覆盖操作
解决
/* 强制居中弹窗 */
.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;
}
简单易懂的代码,直接复制即可!!!