HTML position = center-10px

Question

I am making an HTML website. I have an map as an background picture and I need a button to be on the map. Like this:

But when I start scaling my site, this happens: I know what is the problem: the position of the pictures is center-X px and center-Y px, not margin: 40% 0px 0px 20%. But how to do that? position: absolute; left: 50%-30px; top: 50%-83px doesn´t work.

Answer 1

You can use negative margins which has better support than calc().

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

If you already have margins, you can just minus them from there. However, if they are defined as percentages or em's, then you're going to have to convert them accordingly.