快速解决element中el-dialog弹框组件垂直居中问题

前言

当我们在使用 element 框架中的 el-dialog 弹框组件时，常常会遇到这样一个情况：默认情况下，弹出的窗口会固定在页面的顶部。然而，在很多应用场景中，我们希望弹框能够垂直居中显示，以提升用户体验。为了实现这一目标，我们就需要进行一些额外的配置和样式调整。本文将详细介绍如何利用 element 的属性和 css 样式，快速且简单地实现 el-dialog 弹框组件的垂直居中显示。

---

关键代码

• 你只需要把下面的代码复制到你的项目中， 这个问题就解决啦

  ::v-deep .el-dialog{
         display: flex;
         flex-direction: column;
         margin:0 !important;
         position:absolute;
         top:50%;
         left:50%;
         transform:translate(-50%,-50%);
         max-height:calc(100% - 30px);
         max-width:calc(100% - 30px);
     }
    ::v-deep  .el-dialog .el-dialog__body{
         flex:1;
         overflow: auto;
     }
  

---

注意

flex: 1; 
overflow: auto;

需要注意的是这两行代码虽然不写也可以生效，但其实这两行代码在我们的布局中扮演着重要角色。如果不添加这两行代码，你可能会遇到以下问题（下图）：当浏览器窗口缩小或放大时，容器内的内容可能会溢出边界，导致布局混乱或信息丢失。

• flex: 1

  这个属性实际上是一个简写，它设置了 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 。这意味着容器将尝试占据所有可用空间（flex-grow: 1），在必要时缩小以适应更小的空间（flex-shrink: 1），并且其基础大小设置为 0%（这意味着它将根据可用空间动态调整大小）。在我们的布局中，flex: 1 主要用于确保容器能够填充其父容器的剩余空间。

• overflow: auto

  这个属性控制当内容溢出容器边界时的行为。设置为 auto 时，如果内容超出了容器的尺寸，容器将自动显示滚动条，允许用户滚动查看隐藏的内容。这有助于保持布局的整洁和内容的可访问性。

加上代码之后

总结

因此，当大家在处理一个需要响应式布局和良好内容管理的容器时，一定要记得加上 flex: 1; overflow: auto 这两行代码。这样，无论窗口是缩小还是放大，容器都能正确地展示其内容，并且在必要时通过滚动条来管理溢出的内容。这将大大增强你的网页或应用的用户体验和可访问性。