title: How can I realign this Leaflet map on my page?
body: <p>I use the Leaflet map to display, on a map, a position given by my user.
  However, when I load the map and center it on the marker of the user,  it is not in the center of my map, but in the top-left corner. See this video for more details : <a href="https://imgur.com/a/2wTysTA" rel="nofollow noreferrer">https://imgur.com/a/2wTysTA</a></p>
  
  <p>Here is my code and the css for the map.</p>
  
  <pre><code>import React, { Component } from 'react'
  import L from 'leaflet'
  
  export class VolontariusMap extends Component {
    componentDidMount() {
      this.map = L.map('mapid', {
        center: [49.8419, 24.0315],
        zoom: 16,
        layers: [
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
          }),
        ]
      })
    }
  
    componentWillReceiveProps(nextProps) {
      var lon = nextProps.lon;
      var lat = nextProps.lat;
      if(lon != this.props.lon &amp;&amp; lat != this.props.lat) {
        this.map.panTo(new L.LatLng(lat, lon));
        L.marker([lat, lon]).addTo(this.map);     
        this.map.invalidateSize(); 
      }
    }
      render() {      
          return (
            ""
          )
      }
  }
  
  export default VolontariusMap
  
  </code></pre>
  
  <pre><code>&lt;div id="mapid"&gt;&lt;/div&gt;
  &lt;VolontariusMap lon={this.state.offer.lon} lat={this.state.offer.lat} /&gt;
  </code></pre>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Volontarius&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/&gt;
      &lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
     integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
     crossorigin=""&gt;&lt;/script&gt;
      &lt;script src="https://kit.fontawesome.com/ba635d3828.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="./src/index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>
  #mapid {
      height: 400px;
  }
  </code></pre>