如何实现占屏80%宽高的Bootstrap模态框跨设备居中显示

问题原因 #

1. 百分比高度的生效前提是父元素有明确的高度定义，你仅为.modal-dialog设置了80%高度，但其父级.modal没有配置明确高度，导致高度设置无法生效。
2. Bootstrap 3 默认的.modal自带顶部margin，原生逻辑也不支持垂直居中，需要额外调整对齐规则。

修复后的CSS配置 #

/* 调整modal父容器的基础配置 */
.modal {
  padding: 0 !important;
}

/* 用伪元素创建垂直居中的对齐基准 */
.modal::before {
  content: "";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
}

.modal-dialog {
  display: inline-block;
  vertical-align: middle;
  width: 80% !important;
  height: 80vh !important; /* 直接用视口高度单位，避免父元素高度依赖问题 */
  margin: 0 !important; /* 覆盖Bootstrap默认的上下margin */
}

.modal .modal-content {
  height: 100%;
  padding: 0 20px 20px 20px;
  overflow-y: auto; /* 内容超出时自动出现滚动条，避免撑破容器 */
}

改动说明 #

• 用视口高度单位vh直接定义.modal-dialog的高度，省去了父元素高度依赖的问题，适配所有设备屏幕
• 通过伪元素设置垂直对齐基准，实现全场景下的垂直居中
• 覆盖Bootstrap默认的margin配置，避免高度和位置出现偏差
• 增加溢出滚动配置，避免内容过多时超出容器边界

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