ant组件中modal的居中显示_木木芳草_antd modal 居中

大大的周 02-07 7948

注：该组件本身自带的居中显示：当缩小窗口，其宽度比modal小的时候会掉下去，上面留有一段空白，是因为before的高度问题引起列：

this.modalService.create({ nzContent: ModalTellDetailComponent, nzWrapClassName: 'centerModal', nzFooter: null, nzMaskClosable: false, nzClosable: false, nzCloseIcon: null, nzAutofocus: null });

注：其中nzAutofocus不设置时，会导致出现父页面的滚动条。完美解决办法：兼容IE

.centerModal { display: flex; text-align: center; .ant-modal { top:auto; display: inline-block; align-self: center; max-height: calc(100vh - 30px); margin: auto; text-align: left; vertical-align: middle; } }

注：如果top有值会导致在火狐浏览器出现滚动条。