快速解决element ui中el-dialog弹框组件垂直居中问题的方法_el-dialog垂直居中

  <el-dialog
        :visible="dialogVisible"
        center
        :show-close="false"
        width="400px"
        height="100px"
        class="custom-dialog"
    >
        <span style="margin-left: 80px">删除后不可恢复，确定要删除吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel" style="margin-right: 65px">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

css样式

::v-deep .el-dialog {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
    ::v-deep .el-dialog .el-dialog__body {
        flex: 1;
        overflow: auto;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图展示