将小div准确定位在大中心的中心。在CSS中获取div的大小

Question

所以，这就是我的div的样子（我正在谈论这个带有4个白色方块的蓝色菱形）：

我想把这个白色方块准确地放在父母身边的中心。现在他们处于中心位置，但看起来很奇怪。我应该减少他们的位置大约一半的大小，但它只有在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和width的1/2。

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;
}