Image over image, middle position - html

Question

This is my CSS class:
.overitem {
position: relative;
background: url(images/bg.png) no-repeat;
width:83px;
height: 83px;
}
.sit {
position: absolute;
top: 50%;
left: 50%;
}
My HTML :
<div class="overitem"><img src="/images/vcs.png" class="sit"/></div>
The problem is that I can not make the from the img tag, in a middle of the background of overitem class. What should I do, to make it appear in the middle of the bg.png image?

Answer 1

Since the .sit class has to have a fixed width and height (because its an image), you can use the following method:
.sit {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Source: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Answer 2

you can set margins as
1/2(width of "overitem" minus width of "sit") and
1/2(height of "overitem" height width of "sit")
or try this:
.sit {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(HALF_OF_WIDTH_OF_IMAGE);
margin-top: -(HALF_OF_HEIGHT_OF_IMAGE);
}

Answer 3

In the .sit class you need to have:
margin-left: -(half of width);
margin-top: -(half of height);
An alternative option is:
.overitem {
position: relative;
background: url(images/bg.png) no-repeat;
width:83px;
height: 83px;
line-height: 83px;
}
.sit {
vertical-align: middle;
}

Answer 4

Try this:
elems = document.getElementsByClassName('sit');
for( i = 0, j = elems.length; i < j; i++){
elems[ i ].style.marginLeft = ( elems[ i ].parentNode.offsetWidth - elems[ i ].offsetWidth ) / 2;
elems[ i ].style.marginTop = ( elems[ i ].parentNode.offsetHeight - elems[ i ].offsetHeight ) / 2;
}