在带有隐藏溢出的div内具有绝对定位的中心img

Question

我不能以任何方式居中我有隐藏溢出的父div中的图像。我已经为此工作了几个小时，并搜索/研究/尝试了几个已经被其他用户验证的答案，但由于某种原因，他们对我没有帮助。我认为这可能与有几个不同位置的嵌套类有关，或者可能与js...but有关，因为我想我应该问一下。我已经尝试了left:0和right:0，我尝试了left:-50%的固定高度和我在stackoverflow中找到的其他解决方案，但没有成功。我想用css来解决这个问题，因为如果可能的话，我在js是个新手。很抱歉，如果这听起来像一个太常见的问题或重复的问题，但任何帮助都将非常感谢。以下是我的代码：

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>

编辑:我终于想出了如何将我的图像居中！答案就在这节课上：

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

我不知道为什么左边的%起作用(我猜是因为我的图像太大)，但它确实起到了作用。感谢花时间帮助我解决问题的每一个人，通过尝试和分析您的答案，我找到了解决方案:)

Answer 1

我认为这才是你真正需要的：

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

你应该去掉这个大得离谱的尺寸，才能看到它居中，这是一个有效的例子：

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

在几个月前我发现这个技巧之前，我自己一直在为这个技巧而苦苦挣扎。希望它能帮上忙！

.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
}

只要你的图片不比它所在的父图片大，overflow: hidden就不会影响它。

Answer 3

我修改了你的代码。为了解决你的问题，我删除了"maglens“div，希望没问题。

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>

这是一个很有帮助的文档，帮助你在CSS：http://www.w3.org/Style/Examples/007/center.en.html中处理“居中的事情”。