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

Question

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

我想把这个白色方 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等于总数的 1/2 height和 width元素的。

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