element中el-dialog组件垂直居中完美解决方案，适配超高dialog

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    custom-class="my-dialog"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <!-- dialog content -->
  </el-dialog>
</template>
 
<style scoped>
.my-dialog /deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  height: 100% !important;
}
 
.my-dialog /deep/ .el-dialog__body {
  text-align: center;
  flex: 1;
}
</style>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

这个代码示例展示了如何使用/deep/来穿透scoped样式，并使得el-dialog组件内部的内容垂直居中，同时适应超高的dialog。通过设置el-dialog为flex布局，并使用justify-content和align-items来实现居中，而且通过设置height: 100% !important;确保dialog可以占据整个父容器的高度。