How to locate leaflet zoom control in a desired position

We can create additional Control placeholder(s), besides the 4 provided corners by default.

A nice advantage is that it allows putting several Controls in one of those placeholders. They will stack without overlapping, as in the standard corners.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

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

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

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

Then it becomes easy styling those placeholders with CSS, because their DOM parent is the map container itself. Hence top, bottom, left and right can be specified with percentages (which use the parent's dimensions).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

As for vertical centering the placeholder itself, you can use your favourite technique. Here I used the CSS3 Transform to offset the placeholder by half of its own height.

If necessary (e.g. for old browsers compatibility), you can rather use a "calculate-on-load" method to perform this offset, similar to iH8's answer. But you no longer need to run it on map resize, only when adding new Control(s) to the placeholder.

Live demo: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Note: there is currently an open PR (Leaflet/Leaflet #5554) for this, but since it is not compatible with old versions of Internet Explorer, it will not likely be merged in Leaflet core.

Simplest and Accurate

var map = L.map('map', {
    maxZoom: 20,
    minZoom: 6,
    zoomControl: false
});

L.control.zoom({
    position: 'bottomright'
}).addTo(map);