center img with absolute positioning inside div with hidden overflow

Question

I cannot in any way center an image I have inside a parent div with hidden overflow. I have been working at this for hours and googling/researching/trying several answers that have been validated by other users, but for some reason they are not helping me. I think it may have to do with having several nested classes with different positioning, or may be it has to do with js...but since I can't figure it out I thought I'd ask. I have tried left:0 and right:0, I have tried left:-50% with fixed height and other solutions I have found here in stackoverflow with no luck. I would like to solve it with css because I am very new at js, if possible. Sorry if it sounds like a too common question or a duplicate, but any help will be very appreciated. The following is my code:

CSS

    div#mosaic {display: block; 
                margin:0 auto;    
                width:100%}

    .magnifier {overflow:hidden; 
                position:relative}

    .maglens {position: absolute; 
              overflow: hidden; 
              width: 3000px; 
              height:  300px; }

    .magsmall {position: absolute; 
               border-style: none;}

HTML:

    <div id="mosaic">
      <div class="magnifier" style="height: 584px; width: 467px; margin:  10px;">
          <div class="maglens">
              <img id="imgload" src="img/mosaico1.jpg" class="maglarge" alt="mosaico" style="height: 3500px; width: 2800px;" />
          </div>
       </div>
    </div>

EDIT: I finally figured out how to center my image!! The answer was in this class:

    .magnifier {
     width:100%;
     left:14%;
      }

I have no clue why the left % worked (I guess because of the size of my image) but it did. Thank you everyone who took time to help me solve my question, by trying and analyzing your answers I found the solution :)

Answer 1

I think this is what you really need:

.maglarge{
    display:block;
    margin:auto;
}

And you should have to get rid of this ridiculously big sizes in order to see it centered, here's a working example:

CSS:

div#mosaic {display: block; 
            margin:0 auto;    
            width:100%}

.magnifier {overflow:hidden; 
            position:relative
            width:100%;}

.maglens {position: absolute; 
          overflow: hidden; 
          width:100%}

.magsmall {position: absolute; 
           border-style: none;}

.maglarge{
    display:block;
    margin:auto;}

HTML:

<div id="mosaic">
  <div class="magnifier">
      <div class="maglens">
          <img id="imgload" src="img/mosaico1.jpg" class="maglarge" alt="mosaico" />
      </div>
   </div>
</div>

Answer 2

I used to struggle with this one myself until I found this trick a few months back. Hope it helps!

.maglens {
    position: relative;
}

.maglarge {
    position: absolute;  // this takes it out of the normal doc flow and ties it to its relative position parent
    left: 50%;  // left edge of image is now 50% from the left edge of its parent
    top: 50%;  // top edge of image is now 50% from the top edge of its parent
    transform: translate(-50%, -50%);  // this is the key for exact centering -- it compensates for the width & height of the image itself
}

As long as your image isn't larger than the parent it's contained in, overflow: hidden shouldn't affect it.

Answer 3

I modified your code. To solve your problem, I deleted "maglens" div, I hope it's OK.

CSS:

div#mosaic {
    display: block; 
    margin:0 auto;    
    width:100%
}

.magnifier {
    overflow:hidden; 
    position:relative;
}

.magsmall {
    position: absolute; 
    border-style: none;
}

.maglarge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

HTML:

<div id="mosaic">
    <div class="magnifier" style="height: 584px; width: 467px; margin: 10px;">
        <img id="imgload" src="nature.jpg" class="maglarge" alt="mosaico" style="height: 3500px; width: 2800px;"/>
    </div>
</div>

This is a helpful document help you dealing with "centering things" in CSS: http://www.w3.org/Style/Examples/007/center.en.html

Answer 4

I finally figured out how to center my image!! The answer was in this class:

    .magnifier {
    width:100%;
    left:14%;
    }

I have no clue why the left % worked (I guess because of the size of my image) but it did. Thank you everyone who took time to help me solve my question, by trying and analyzing your answers I found the solution :)