how to create custom position for controls

[12rambau]

I would love to display my legend in the "topcenter" area of the map as all the other corners are used by buttons, and other controls as shown in this example:

the problem is that the "topcenter" doesn't exist in leaflet/ipyleaflet. option A would be to customize the css of one of the existing corner but they won't be usable anymore. looking on the web I found this workaround for leaflet (https://stackoverflow.com/a/60391674/6734243):

.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%);
}

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.

Is there a way I can reach this level of customization from my side ? If yes where should I add the javascript part ?