前军教程网

我们一般在用vue + elementUI的时候经长会用到 el-dialog组件，平时也没太在意到el-dialog的居中问题，因为用到el-dialog的时候内容也不多。今天刚好碰到一个内容比较多，又刚好用el-dialog的时候就差一点点又会出现滚动的情况，所以就想能不能垂直居中一下，发现官方没这功能，只能自己改css。

如图，这样不居中的情况很难看，（不介意难看的略过）

我也是在网上找了一下办法，说来也简单，自己写个css盖掉原来官方的css就可以了

<style scoped>
/deep/.el-dialog {
  display: flex;
  display: -ms-flex; /* 兼容IE */
  flex-direction: column;
  -ms-flex-direction: column; /* 兼容IE */
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
/deep/.el-dialog .el-dialog__body {
  max-height: 100%;
  flex: 1;
  -ms-flex: 1 1 auto; /* 兼容IE */
  overflow-y: auto;
  overflow-x: hidden;
}
</style>

这种css 网上很多，但是要注意css前面的 /deep/ 深度选择器 这个很重要。不了解的/deep/的同学自行百度 特别是在 <style scoped>里

最终效果