el-dialog 貌似不设置样式的时候默认不居中显示,如下所示:
个人感觉居中好看一点,就修改了样式:
.el-dialog {
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*height:600px;*/
max-height:calc(100% - 200px);
max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex:1;
overflow: auto;
}
是通过 transform 来实现水平和垂直居中。
position absolute
top 50%
left 50%
margin 0 !important
transform translate(-50%, -50%)
是设置对话框的高度和宽度。
max-height calc(100% - 30px)
max-width calc(100% - 30px)
以上代码的作用:给 el-dialog__body 加 overflow auto 实现 body内部滚动。
display flex
flex-direction column
>.el-dialog__body
overflow auto
但是,因为overflow容器需要外部限制容器的大小才能产生内部滚动,所以使用 flex 把 el-dialog__body 的大小限制为总大小减去头和尾的大小。
页面效果如下: