Position and scalability, logo stays in the middle the whole time if change in window size

Question

I am having trouble positioning the image in the exact middle and to maintain in the middle regardless of the screen size. here is the link for the JSFiddle http://jsfiddle.net/hansmrls/MARkq/

<div class="logos"><img class='itunes' src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" alt="#"></div>

.logos img{
  position: absolute;
  height: 20%;
  top: 34%;
  left: 50%;
  display: inline-block;
  z-index: 998;
}

Answer 1

Try adding this to your .logos img class

margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Working example.

The reason that left:50% is not working is because it uses the 50% as a start point and starts calculating the position from there - from left to right.

EDIT: Another method - while taking your height: 20%; (which also affects width) into consideration, calculate the image horizontal size and divide it by 2. Set margin-left to the negative value of that result. This way you only need left:50%, but it's not so responsive and it won't work properly for images with different size.

Answer 2

I would go with something like this:

HTML:

<div class="logos">
  <img class="itunes" src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" alt="itunes icon"/>
</div>

CSS:

/* I guess you already have something like this for the html and body in your CSS */ 
html, body { margin: 0; height: 100%;}

.logos {    
    height: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: hidden;
}

.logos:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;    
}

.logos img {    
    z-index: 998;
    display: inline-block;
    vertical-align: middle;    
    max-width: 100%;
    height: auto;
}

Here you have a demo.

With this approach your image is vertical and horizontal centered and kind of responsive. If you need a smaller image just take a smaller image and save some bytes.