css - 将小 div 精确定位在大 div 的中心。 CSS中获取div的大小

Question

所以，这就是我的 div 的样子(我说的是带有 4 个白色方 block 的蓝色菱形):

我想将这个白色方 block 恰好放在其父项两侧的中心。现在他们虽然处于中心位置，但是看起来却相当的奇怪。我应该将它们的位置减少一半左右，但这只能在 CSS 中实现吗？我不想为此使用 JS，因为代码会难以辨认。

CSS

.handle {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border: black 1px solid
}
.handle#top {
    left: 50%;
    top: 0;
}

.handle#left {
    left: 0;
    top: 50%;
}

.handle#right {
    right: 0;
    top: 50%;
}

.handle#bottom {
    left: 50%;
    bottom: 0;
}

HTML

<div class="object">
    <div class="handle" id="left"></div>
    <div class="handle" id="right"></div>
    <div class="handle" id="top"></div>
    <div class="handle" id="bottom"></div>
    <img src="svg/test1.svg" class="stopro"/>
</div>

Answer 1

您有 width: 1em; 和 height: 1em; 所以当您使用 top: 50%; 和 left: 50%; 另外，使用 margin-top 和 margin-left 扣除边距，它们等于总 height 的 1/2元素的 code> 和 宽度。

Demo

Demo 2

.handle#top {
    left: 50%;
    top: 0;
    margin-left: -.5em;
}

.handle#left {
    left: 0;
    top: 50%;
    margin-top: -.5em;
}

.handle#right {
    right: 0;
    top: 50%;
    margin-top: -.5em;
}

.handle#bottom {
    left: 50%;
    bottom: 0;
    margin-left: -.5em;
}