前言

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;
  }
}