HTMLの位置= center-10px

Question

私はHTMLのウェブサイトを作っています。私は背景画像として地図を持っており、地図上にボタンが必要です。このように：

しかし、私は、私のサイトをスケーリング起動したときに、これが起こる： 私は問題が何であるかを知っている：画像の位置は、center-X pxとcenter-Y pxある、ないmargin: 40% 0px 0px 20%。しかし、それを行う方法？ position: absolute; left: 50%-30px; top: 50%-83pxは機能しません。

Answer 1

あなたはcalc()より良いサポートを持っている負のマージンを使用することができます。

position: absolute; 
left: 50%; 
top: 50%; 
margin-top: -83px; 
margin-left: -30px; 

すでに余白がある場合は、そこからマイナス値を差し引いても構いません。ただし、パーセントまたはemのものとして定義されている場合は、それに応じて変換する必要があります。

Answer 2

あなたは画像を背景画像（背景画像としてマップでのdivコンテナ）からの相対になりたいでしょう：

position: relative; left: 30px; top: 83px 

Answer 3

絶対的なマージン（これはうまくいく）を使用している人がいますが、transform: translateの実装では別のアプローチがあります。

以下の例では、内側のimgは常にあなたのニーズに合うと思われるdivを含む中央に配置されています。私はボックスにランダムなアニメーションをいくつか追加して、この位置付けの効果を確認することもできます。

setInterval(randomAnimation, 500); 
 

 
function randomAnimation() { 
 
    var random = Math.floor(Math.random() * (4 - 0)); 
 
    if (random == 0) 
 
    $(".box").animate({ 
 
     top: "+=50" 
 
    }); 
 
    else if (random == 1) 
 
    $(".box").animate({ 
 
     left: "+=50" 
 
    }); 
 
    else if (random == 2) 
 
    $(".box").animate({ 
 
     top: "-=50" 
 
    }); 
 
    else 
 
    $(".box").animate({ 
 
     height: "+=50" 
 
    }); 
 
}

.box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 100px; 
 
    background-image: url(http://via.placeholder.com/150x100/ff0000/ffffff) 
 
} 
 

 
img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box"> 
 
    <img src="http://via.placeholder.com/50x50" /> 
 
</div>