How can I show a Leaflet map in a modal with the pin or marker centered, without it going to a single corner as shown in the image:

I am working on javascript, html and apps script and the Leaflet map, so how can I show a Leaflet map in a modal with the pin or marker centered, without going to a single corner as shown in the image, this only happens in a modal or in a secondary html, when it is the main html it is displayed correctly:

// Obtener la referencia al elemento del mapa
var mapa = L.map('mapa').setView([0, 0], 13);
mapa.doubleClickZoom.disable();
// Crear una capa de mapa con Leaflet
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(mapa);

// Crear un marcador con una ubicación predeterminada
var marcador = L.marker([0, 0]).addTo(mapa);

// Obtener la ubicación del usuario utilizando la API de geolocalización del navegador
navigator.geolocation.getCurrentPosition(function(posicion) {
  // Actualizar la ubicación del marcador y el centro del mapa con la ubicación del usuario
  marcador.setLatLng([posicion.coords.latitude, posicion.coords.longitude]);
  mapa.setView([posicion.coords.latitude, posicion.coords.longitude], 18);
}, function(error) {
  // En caso de error, mostrar un mensaje de error en la consola del navegador
  console.error('Error al obtener la ubicación: ' + error.message);
});

// Agregar un controlador de eventos de clic al mapa
mapa.on('click', function(evento) {
  // Actualizar la ubicación del marcador y el centro del mapa con la ubicación del clic
  marcador.setLatLng(evento.latlng);
  mapa.setView(evento.latlng, 18);
});

HTML: <div id="mapa" style="height: 200px;"></div>