element dislog 水平垂直居中与拖曳指令冲突

因为项目中封装的弹框拖拽指令，起初想通过全局水平垂直居中样式

.g_Dialog{
  text-align: initial;
}
.el-dialog__wrapper {
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .el-dialog {
    margin: 30px auto !important;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
  }
}
















.el-dialog{
    display: flex;
    flex-direction: column;
    margin:0!important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
复制代码

来解决，结果与现有拖拽指令冲突，无论如何调整效果都不太理想。
无奈尝试通过js计算的方式来居中，

this.$refs.dialog.style.marginTop= `calc((100vh${this.$refs.dialog.clientHeight}px) / 2)`
复制代码

指令中页面首次加载就会触发this.$refs.dialog.clientHeight值为0；混入中对话框未显示时获取不到clientHeight属性。
最终偶然间从网上看到另外一种css居中方式

/deep/.el-dialog__wrapper {
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .el-dialog {
    margin: 30px auto !important;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
  }
}
复制代码