BFE.devAI解答 - CSS 问题
5. modal组件的height问题

可以使用绝对定位和transform属性来实现modal在viewport中心显示，并通过padding实现上下边界间距的效果。同时，可以设置.modal-body的max-height和overflow来控制最大高度和滚动条的显示。

CSS代码如下：

.modals { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.modal { position: relative; width: 300px; max-height: 300px; padding: 30px 0; overflow: auto; }

.modal-header { background-color: #f44336; height: 50px; }

.modal-body { background-color: #2973af; padding: 10px; }

注意，在设置modal的高度时，不能将height属性设置为100%或者max-height属性设置为100%，否则会导致modal高度超出viewport。