En mi aplicación vue, Bootstrap 5 modal no está centrado horizontalmente en el escritorio. Este es mi componente:

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>

Revisé con elementos de inspección pero no encontré el camino. la estructura HTML se copia de getbootstrap.com y todo funciona muy bien en dispositivos móviles .