伸縮する画像の上に位置がずれないよう伸縮するボタンを置きたい

###前提・実現したいこと
レスポンシブのコーディングを実現する上で、伸縮する画像の上に位置がずれないよう伸縮するボタンを置きたいです。

###発生している問題・エラーメッセージ
上に乗せるボタンが背景画像とズレてしまいます。
使用している画像は下の画像です。
下のソースコードを展開すれば、なんとなくボタンが画像の真ん中に来るようになりレスポンシブにも対応できているのですが、
例えばウィンドウを伸び縮みさせるとボタンが雲にかかったりかからなかったりするのがわかると思います。
このような背景画像とのズレが許されない場合はどのように実装すればよいでしょうか。
お知恵を貸していただければ幸いです。

###ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css" media="screen">
		html, body{
			width: 100%;
			height: 100%;
			margin: 0;
		}
		div{
			display: block;
			width: 100%;
			height: 100%;
			background-image: url(a.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			padding-top: 30%;
		}
		a{
			background-color: #ddd;
			background-size: 100% auto;
			width: 60%;
			display: block;
			/*line-height: 300%;*/
			text-decoration: none;
			text-align: center;
			margin: 0 auto;
			padding: 2%;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div>
	<a href="#">ボタンです</a>
	</div>
</body>
</html>

###補足情報(言語/FW/ツール等のバージョンなど)
全く別の実装方法なのですが、クリッカブルマップをベースにjQueryのライブラリを駆使してかなりいいところまで、つまり下の画像とのズレなく実装できたことがありました。
しかし、その方法はPCでは全く問題ないのですが、モバイルでリンクをタップした際にハイライトが効かず断念しました。おそらくこちらもハイライトを有効にする方法はなにかあったと思うのですがクリッカブルマップの場合どのようにすればよいかわかりませんでした。
使用したライブラリは下記です。
http://www.outsharked.com/imagemapster/default.aspx?docs.html
https://github.com/stowball/jQuery-rwdImageMaps
http://davidlynch.org/projects/maphilight/docs/

タップ時に別画像に切り替える方法は画像が伸縮するレスポンシブは自分の調べた限りうまくいきませんでした。

yunn

2015/11/02 08:14

試しましたが、よほど小さくしない限りは特に問題ないように思えるし…問題が生じるサイズとか、こうなって欲しくない図（簡単なもので十分かと。）とか、ブラウザ（Ver.）、OSなどを挙げると回答を得やすいかも知れません。

行動規範の内容に同意します

回答1件

ボタンの上下中央寄せをpadding-top:30%で実現しているからでしょう。
position:absoluteとmargin:autoで上下中央寄せさせてください。

また、divの高さとbackground-imageの高さが合っていないので、background-size:coverに修正する必要があるように見えます。

DEMO

css
1html, body{
2    width: 100%;
3    height: 100%;
4    margin: 0;
5}
6div{
7    width: 100%;
8
9    display: block;
10    height: 100%;
11
12    background-image: url(https://teratail.com/uploads/contributed_images/be16d86c665d81b3e39283b19a0a6b80.jpeg);
13    background-repeat: no-repeat;
14    background-size: cover;
15}
16a{
17  position: absolute;
18  top: 0;
19  left: 0;
20  right: 0;
21  bottom: 0;
22  margin: auto;
23
24  width: 60%;
25  height: 2em;
26  padding: .25em;
27
28  background-color: #ddd;
29  background-size: 100% auto;
30  width: 60%;
31  margin: auto;
32  box-sizing: border-box;
33  display: block;
34  /*line-height: 300%;*/
35  text-decoration: none;
36  text-align: center;
37}