如何使用ng-modal垂直居中模态框？能否指定modal-dialog-centered类？

嘿，这俩关于Angular模态框的问题我熟，刚好之前处理过类似需求，给你详细捋清楚：

有两种靠谱的实现方式，看你需求选：

方法1：用官方自带的居中类（同时解决问题2） #

如果你用的是ng-bootstrap的Modal组件（这是Angular生态里最常用的模态框库，一般说的ng-modal指它），其实官方已经提供了modal-dialog-centered类来实现垂直居中，而且有专门的配置项给内层对话框加这个类——就是dialogClass，不是你之前用的windowClass。

举个实际代码例子，在你调用打开模态框的地方这么写：

// 组件内打开模态框的方法
openMyModal() {
  const modalRef = this.modalService.open(YourTargetModalComponent, {
    dialogClass: 'modal-dialog-centered' // 直接给内层的.modal-dialog加类
  });
}

这样设置后，Bootstrap的内置样式会自动把对话框垂直居中，这是最推荐的方式，完全符合官方规范，不用自己写额外CSS。

方法2：自定义CSS实现居中 #

如果因为项目限制不能用官方类，也可以自己写CSS搞定。先通过windowClass给最外层容器加个自定义类，再用后代选择器控制内层对话框的定位：

第一步，打开模态框时设置windowClass：

openMyModal() {
  const modalRef = this.modalService.open(YourTargetModalComponent, {
    windowClass: 'custom-centered-modal'
  });
}

第二步，在全局样式文件（比如styles.scss）里加这段CSS：

.custom-centered-modal .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem); // 留点边距，避免对话框贴顶贴底
}

这种方式适合需要自定义居中效果的场景，比如调整上下偏移量之类的。

刚才方法1里已经说清楚啦，ng-bootstrap的Modal配置项里有个dialogClass，专门用来给内层的.modal-dialog元素添加CSS类，而windowClass是给最外层的.modal容器加类的，之前你没找到这个选项可能是没留意官方文档的这个细节。

直接用dialogClass: 'modal-dialog-centered'就能精准把类加到内层元素上，完全不需要hack手段。

补充一句：如果你的项目用的不是ng-bootstrap，而是Angular Material的MatDialog这类其他模态框库，垂直居中的思路也类似——要么用库自带的配置项，要么通过CSS选择器定位到对话框容器设置居中样式。

内容的提问来源于stack exchange，提问作者Michael Gantz