vue 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;
}

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

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

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

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

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

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

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

页面效果如下：