title: Custom leaflet divIcon not staying in fixed marker position when zoomed
body: <p>I have made a custom marker for use with leaflet maps, it seems to work fine but when I zoom in and out of the map it changes position drastically and I would like it to stay where it should with the point on the position. I have checked and tried changing anchor points and position but it just seems to make it worse so I will show you what I have and hopefully someone can point me in the right direction.</p>
  
  <p>I have made a JSFIDDLE here : <a href="http://jsfiddle.net/qpt02Luy/1/" rel="nofollow noreferrer">http://jsfiddle.net/qpt02Luy/1/</a></p>
  
  <p>and the html is :</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the CSS is :</p>
  
  <pre><code>body { padding: 0; margin: 0; } html, body, #map { z-index : 1; height: 100vh; width: 100vw; }
  .location-pin {
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
  }
  .location-pin img {
    width: 46px;
    height: 46px;
    margin: -26px 0 0 -13px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
  
    background: #32383e;
  }
  .pin {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 50% 0;
    background: #32383e;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -43px 0 0 -30px;
  
  }
  .pin:after {
    content: '';
    width: 26px;
    height: 26px;
    margin: 2px 0 0 2px;
    position: absolute;
    border-radius: 50%;
  
  }
  </code></pre>
  
  <p>The JS : </p>
  
  <pre><code>var zoom = 10;
  var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data © &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors';
  var osm = new L.TileLayer(osmUrl, {
      attribution: osmAttrib,
      detectRetina: true
  });
  
  // please replace this with your own mapbox token!
  var token = 'pk.eyJ1IjoidGhlZGlnZ2xlcnVrIiwiYSI6ImNqcG9uZHM3eDAxcDk0Mm4wcjdsYXJ4YXoifQ.1WVGvW9ESiMWfk3F6g3UIA';
  var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;
  var mapboxAttrib = 'Map data © &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors. Tiles from &lt;a href="https://www.mapbox.com"&gt;Mapbox&lt;/a&gt;.';
  var mapbox = new L.TileLayer(mapboxUrl, {
    attribution: mapboxAttrib,
    tileSize: 512,
    zoomOffset: -1
  });
  
  window.map = new L.Map('map', {
      layers: [mapbox],
      minZoom: 2,
      maxZoom: 18,
      center: [51.505, -0.09],
      zoom: 10,
      zoomControl: false
  
  });
  
  var myIcon = L.divIcon({
      className: 'location-pin',
      html: '&lt;img src="https://www.faces2places.co.uk/img/jules.jpg"&gt;&lt;div class="pin"&gt;&lt;/div&gt;&lt;div class="pulse"&gt;&lt;/div&gt;',
      iconSize: [30, 30],
      iconAnchor: [18, 30]
    });
  
    L.marker([51.5, -0.09], {icon: myIcon}).addTo(map);
  </code></pre>