將小格子精確定位在大格子的中心。獲取DIV的大小在CSS

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這等於1扣除利潤/總數爲height和元素的。

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