Center Bootstrap 5 模态水平

Question

In my vue application, Bootstrap 5 modal is not centered horizontally in desktop. This is my component:

Modal.vue

<template>
  <teleport to="#modal-container">
    <div
      ref="modalRef"
      class="modal fade"
      :id="`modal-${id}`"
      tabindex="-1"
      :aria-labelledby="`modal-${id}`"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div
          class="modal-content"
          :style="[noPadding && { backgroundColor: 'transparent' }]"
        >
          <div v-if="!noHeader" class="modal-header">
            <slot name="header" />
          </div>
          <div class="modal-body" :style="[noPadding && { padding: 0 }]">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
import { Modal } from "bootstrap";
import { onBeforeRouteLeave } from "vue-router";

export default defineComponent({
  name: "Modal",
  // modal states logic, no styles ....
});
</script>

<style lang="scss">
.modal-dialog {
  margin: 20px !important;

  .modal-header {
    font-weight: 500;
    font-size: 17px;
    border-bottom: none;
    color: $dark;
    padding-bottom: 0;
  }

  .modal-content {
    border-radius: 10px;
  }
}
</style>

I checked with inspecting elements but didn't find the way. the HTML structure is copied from getbootstrap.com and everything is working great in mobile .

Answer 1

With this line

margin: 20px !important;

You delete the auto property to center the modal.

Use this instead

margin: 20px auto !important;