关于element-ui的el-dialog页面不居中问题

el-dialog 貌似不设置样式的时候默认不居中显示，如下所示：

有很多地方是需要用到居中的，并且比较美观，所以我修改了以下代码（>>>是为了样式穿透）

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

其中

position absolute
 top 50%
 left 50%
 margin 0 !important
 transform translate(-50%, -50%)

是通过 transform 来实现水平和垂直居中

max-height calc(100% - 30px)
max-width calc(100% - 30px)

是设置对话框的高度和宽度。

display flex
flex-direction column
>.el-dialog__body
overflow auto

上代码的作用：给 el-dialog__body 加 overflow auto 实现 body内部滚动。

但是，因为overflow容器需要外部限制容器的大小才能产生内部滚动，所以使用 flex 把 el-dialog__body 的大小限制为总大小减去头和尾的大小。

页面效果如下：