jQuery模态框无法水平居中问题求助

你的模态框无法居中的核心原因是.mi-modal的定位和宽度设置逻辑错误，当设置max-width:400px时，left:0会让容器靠左对齐，没有自动居中的机制。以下是修改方案，让模态框实现类似Bootstrap的居中效果：

修改核心CSS代码 #

1. 调整.mi-modal容器样式 #

将原.mi-modal的样式替换为：

.mi-modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  height: 100%;
  width: 100%; /* 改为全屏宽度 */
  box-sizing: border-box;
  padding: 20px; /* 保留内边距，避免模态框贴边 */
  display: flex; /* 使用flex布局实现内部元素居中 */
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 顶部对齐，类似Bootstrap */
}

2. 调整.mi-modal-wrapper样式 #

修改.mi-modal-wrapper，让它自适应宽度并限制最大宽度：

.mi-modal-wrapper {
  position: relative; /* 改为相对定位，配合flex容器 */
  z-index: 9999;
  margin-top: 3em; /* 替换原top属性，避免绝对定位的问题 */
  width: 100%;
  max-width: 400px; /* 限制最大宽度 */
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;
}

3. 修正拼写错误 #

原.mi-modal-close里的position: absoloute是拼写错误，改为：

.mi-modal-close {
  /* 其他样式保留 */
  position: absolute; /* 修正拼写 */
}

完整修改后的代码 #

JavaScript（无需修改） #

// common close button
$('.mi-modal-toggle').click(function() {
  $(this).closest(".mi-modal").toggleClass('modal-visible');
});

// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
  var modalid = $(this).data("modal-id");
  $(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});

CSS #

.mi-modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.mi-modal.modal-visible {
  visibility: visible;
}

.mi-modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 0%, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
  box-sizing: border-box;
}

.mi-modal.modal-visible .mi-modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mi-modal-wrapper {
  position: relative;
  z-index: 9999;
  margin-top: 3em;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;
}

.mi-modal-transition {
  transition: all 0.4s;
  transform: translateY(-10%);
  opacity: 0;
}

.mi-modal.modal-visible .mi-modal-transition {
  transform: translateY(0);
  opacity: 1;
}

.mi-modal-header,
.mi-modal-content {
  padding: 1em;
}

.mi-modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
  border-bottom: 1px solid #e8e8e8;
}

.mi-modal-close {
  margin: -0.5rem -0.5rem -0.5rem auto;
  color: #aaa;
  background: #edcfa5;
  border: 0;
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.3em;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  opacity: .5;
}

.mi-modal-close:hover {
  color: #777;
}

.mi-modal-heading {
  font-size: 1.125em;
  margin: 0px 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mi-modal-content>*:first-child {
  margin-top: 0;
}

.mi-modal-content>*:last-child {
  margin-bottom: 0;
}

.mi-modal.modal-scroll .mi-modal-content {
  max-height: 60vh;
  overflow-y: scroll;
}

.mi-modal.modal-scroll .mi-modal-wrapper {
  max-height: 80vh;
  overflow-y: auto;
  margin-top: 2em;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer>* {
  margin: 0.25rem;
}

HTML（无需修改） #

<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>

<div class="mi-modal" data-modal-id="modal1">
  <div class="mi-modal-overlay mi-modal-toggle"></div>
  <div class="mi-modal-wrapper mi-modal-transition">
    <div class="mi-modal-header">
      <h2 class="mi-modal-heading">This is a modal</h2>
      <button class="mi-modal-close mi-modal-toggle">&times;</button>
    </div>

    <div class="mi-modal-body">
      <div class="mi-modal-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
      </div>
    </div>

    <div class="modal-footer">
      <button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
      <button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

说明 #

• 使用flex布局让.mi-modal成为全屏容器，内部的.mi-modal-wrapper自动水平居中
• 给.mi-modal-wrapper设置width:100%和max-width:400px，实现小屏幕自适应、大屏幕固定宽度的效果
• 修正了position属性的拼写错误，避免关闭按钮定位异常
• 适配了滚动模态框的样式，保证内容过多时依然正常显示

内容的提问来源于stack exchange，提问作者Asma Binta Younus