如何使elementUI对话框居于页面中间

在开发的时候，经常会用到elementUI的对话框组件，如何使对话框居中呢？按照如下操作即可：

添加如下样式，现在这个弹框既能在视窗居中，又能在内容过多时防止弹框大小超出视窗，还能把滚动限制在body内部从而使得头和尾始终可见，再也不用滚上滚下去找各种标题和按钮了！

.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% - 30px);
       max-width:calc(100% - 30px);
   }
   .el-dialog .el-dialog__body{
       flex:1;
       overflow: auto;
   }