Leaflet Custom Control position: center

Adding a custom control on a map on leaflet is performed like that .

For instance for a logo :

var logo= L.control({
    position : 'topleft'
});
logo.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'myControl');
    var img_log = "<div class="myClass"><img src=\"images/logo.png\"></img></div>";

    this._div.innerHTML = img_log;
    return this._div;

}
logo.addTo(map);

Then, you can add CSS style to myClass to center it: (this part has not been tested by myself)

.myClass {
   padding-top:50%;
   padding-left: 50%;
}

You can simply override the .leaflet-left class to this, and your control will be centered horizontally.

.leaflet-left {
    left: 50%;
    transform: translate(-50%, 0%);
}

And to center vertically, just override the class .leaflet-top to this:

.leaflet-top {
    top: 50%;
    transform: translate(0%, -50%);
}

NOTE: These changes will affect other controls on the map such as zoom controls.

EDIT:

If you want to add the functionality to leaflet so that the other controls arent affected, you can do this:

leaflet.js: Beginning at line 4900 I believe?

t("top", "left"),
t("top", "right"),
t("bottom", "left"),
t("bottom", "right"),

Add these two lines:

t("top", "center"),
t("bottom", "center")

This would allow for use of positions 'topcenter' and 'bottomcenter'

Then simply add css class for 'leaflet-center':

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

I get this is an old topic, but anyhow, here is my workaround.

Add some css :

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

.leaflet-middle {
    top: 50%;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  transform: translate(0%, -50%);

}

.leaflet-center.leaflet-middle {
  transform: translate(-50%, -50%);
}

and patch a the position method.

L.Map.include({
  _initControlPos: function () {
    var corners = this._controlCorners = {},
      l = 'leaflet-',
      container = this._controlContainer =
        L.DomUtil.create('div', l + 'control-container', this._container);

    function createCorner(vSide, hSide) {
      var className = l + vSide + ' ' + l + hSide;

      corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('top', 'left');
    createCorner('top', 'right');
    createCorner('bottom', 'left');
    createCorner('bottom', 'right');

    createCorner('top', 'center');
    createCorner('middle', 'center');
    createCorner('middle', 'left');
    createCorner('middle', 'right');
    createCorner('bottom', 'center');
  }
});

Now you have 5 new positions to use.