CSSの画像の左上隅が位置指定センターでない

Question

イメージをCSSの左上隅に配置することはできますか？ 私はそれの上に他の画像（ポイントを持つ地図）を持っている画像を持っています。背景画像は、固定サイズを有し、Iは、CSSと上部にある画像の位置を設定している：

#map { 
width: 700px; 
height: 700px; 
margin: auto; 
position: relative; 
} 
.point { 
position: absolute; 
left: 39.9%; 
top: 81.9%; 
z-index: 1; 
} 

点のサイズが20x20pxので、私は必要な場所から10pxのを減算した後に変換されます。 ％。それは必要なものすべてが見えます。

小さな画面用にコードを動作させようとしています。幅と高さをmax-widthとmax-heightに変更しました。今ではバックグラウンドは小さい画面に適応しますが、ポイントの位置で計算した20pxのため、画面が小さくなるほど、必要な場所から遠ざかります。

私が考えることができる唯一の解決策は、左上のコーナーではなく％でポイントの中心の位置を設定できるかどうかということでした。それは可能でしょうか？より良い方法がありますか？

Answer 1

left: calc(50% - 10px); 
top: calc(50% - 10px); 

それとも

left: 50%; margin-left: -10px; 
top: 50%; margin-top: -10px;