投稿画像の写真にマウスオーバーした際にアイコンを表示する

WordPressで投稿画像の写真にマウスオーバーした際に、アイコンを表示したいです。ベースとなる写真はリンクになっています。画像のサイズがまちまちであるため、中央にアイコンをのせたいです。

中央に表示することはできましたが、マウスオーバーした際の挙動がおかしいです。おそらくですが、マウスオーバーしたとき、判定する位置がずれているんだと思います。判定位置を直すと、アイコンが左上に表示されてしまいます。

つまり、現在、片方はできると片方がおかしくなる状態です。いろいろと試したのですが、うまくいきません。。

以下、ソースになります。

●　アイコンは中央に表示できますが、位置がずれています。上から左からマウスを持ってくると、反応しません。理屈はわかるのですが、解決方法がわかりません。。

<a href="http://" target="_blank" class="item">
<span class="overlay"></span>
<img src="http://aaa.com/picture.jpg"  />
</a>

a.item{
	position:relative;
	float:left;
}

span.overlay{
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top:-15px;
	margin-left:-15px;
	width:100%;
	height:100%;
	background-image:url(../uploads/images/icon.png);
	background-repeat:no-repeat;
	opacity: 0;
	filter:alpha(opacity=0);
}

span.overlay:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

●　topとleftを動かさなければ、位置はあいますが、アイコンが左上に表示されます。marginなどいろいろと試しましたが、中央に持ってくることができませんでした。

span.overlay{
	position:absolute;
	top: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
	width:100%;
	height:100%;
	background-image:url(../uploads/images/icon.png);
	background-repeat:no-repeat;
	opacity: 0;
	filter:alpha(opacity=0);
}

お手数かと思いますが、アドバイスいただけると助かります。