element dialog 垂直水平居中显示

如何让组件中的dialog在可视区域垂直水平居中

• 先将dialog放到body的下层，保证自己写的样式相对于视口区域生效。element dialog文档中有个append-to-body属性，将其设置为true,会将dialog扔到body下面。
• 再设置一个自定义dialog的class

<el-dialog title="标题" custom-class="selfDialog" :visible.sync="dialogVisible" :append-to-body="true">
  <div class="content" ></div>
</el-dialog>

然后再给selfDialog给样式，注意dialog已经被扔到body下面，在组件less里嵌套写样式不会生效，要在组件的原有style外再加个标签。content的这个class也是在body下面。

<style>
  .selfDialog{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    height:90%;
    width:80%;
    margin-top:0!important;
  }
  .content{
    display:flex;
    align-items: center;
    justify-content: center;
    width:95%;
    height:90%;
  }
</style>

<style lang="less"  scoped>
  /*自己组件的样式*/
</style>

这样就好了，有用的话点个赞哦