Element Dialog水平垂直居中样式

前言

Element UI 是目前最火的前端 Vue.js UI 组件库，但是 Dialog 默认样式并不是水平垂直居中，这就很让人很尴尬。不过对于有水平垂直居中的需求来说，我们是可以自己进行调整的。最常用的方法也试过了，最终得到以下方法是最佳的（我个人感觉），接下来和大家分享一下。

一、默认样式截图

默认样式截图

二、调整后样式截图

调整后样式截图

二、调整后样式截图

App.vue

.el-dialog__wrapper {
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  &:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .el-dialog {
    margin: 30px auto !important;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    white-space: normal;
  }
}

关于本文

作者：fooooooood

本文链接：https://blog.csdn.net/Fooooooood/article/details/113257185