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

要使Element UI的对话框居中显示，您可以使用Flex布局来设置对话框的父容器样式。以下是一个简单的例子，演示如何使用CSS将Element UI的对话框居中：

1. 在父容器上使用flex布局。
2. 设置justify-content和align-items属性为center以实现水平和垂直居中。

HTML:

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    :visible.sync="dialogVisible"
    title="提示"
    width="30%"
    custom-class="centered-dialog"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

CSS:

<style>
.centered-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 可根据需要调整高度 */
}
</style>

JavaScript:

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

将上述代码放入您的Vue组件中，点击按钮将会打开一个居中的对话框。您可以根据实际需求调整父容器的高度和对话框的样式。