element-ui在移动端怎么让弹出框居中显示？

Question

elementUI开发的页面在移动换浏览器访问的时候，弹出框是置顶的，如何让弹出框的位置居中呢？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Element UI 在移动端让弹出框居中显示

Element UI 的弹出框在移动端默认是置顶的，可以使用 CSS 代码来实现居中显示。

可以在弹出框的容器元素上添加以下 CSS 样式：

.el-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这段代码将弹出框的位置设置为相对于视口的居中位置。

如果你想在弹出框的内容部分也居中，可以添加以下 CSS 样式：

.el-dialog__wrapper {
  text-align: center;
}

这段代码将弹出框的内容部分设置为居中对齐。

你也可以使用 Element UI 的内置样式，添加以下代码：

<el-dialog :center="true">...</el-dialog>

这将使弹出框在移动端居中显示。

希望这些解决方案能够帮助你解决问题！