Question

我不能以任何方式将我在隐藏溢出的父div中的图像居中。我已经在这工作了几个小时，谷歌搜索/研究/尝试了几个已被其他用户验证的答案，但由于某种原因，他们没有帮助我。我认为它可能与几个具有不同定位的嵌套类有关，或者可能与js有关......但是因为我无法弄清楚它我想我会问。我试过左：0和右：0，我试过左：-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
}

只要您的图片不比其中包含的图片大，溢出：隐藏就不会影响它。

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

Answer 4

我终于想出了如何集中我的形象!!答案是在这堂课中：

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

我不知道为什么左边的％工作（我猜是因为我的图像的大小），但确实如此。感谢所有花时间帮我解决问题的人，通过尝试和分析你的答案，我找到了解决方案：）

中心img，内部具有绝对定位，隐藏溢出

4 个答案: