如何居中放置在div上的图像居中，但是图像居中于其底部而不是其中心？

Question

我是CSS的新手，对如何修改CSS来解决此问题有些困惑。

所以我有一些代码大部分都在工作。我有一个包含（简化）的div：

        <div id="map">
            <div id="mapContainer"/>
            <img id="iconOnMap" src="pinSource"/>
        </div>

以及将图片放置在mapContainer div中心的基本CSS：

    #iconOnMap {
        width: 2em;
        height: 2em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

    #map {
        width: 95vw;
        height: 55vw;
        position: relative;
    }

    #mapContainer {
        position: absolute;
        width: inherit;
        height: inherit;
    }

但是，图像位于div的 center 中心，而我希望图像的底部处于中心，而不是图像的中心位于中心。

该问题的说明：

在上图中，蓝色标记指向正确的位置，红色针指示错误的行为。尽管图钉的中间是当前的中心，但图钉的底部/精确点应该在中心。有关如何完成此操作的任何提示？

Answer 1

它在中间，因为您要告诉它在中间。代替：

#iconOnMap {
        ...
        transform: translate(-50%, -50%);
        ...
    }

尝试：

#iconOnMap {
        ...
        transform: translate(-50%, -100%);
        ...
    }

这应该将其沿Y方向平移为图标的全高，而不是其高度的一半。