在方形响应容器中居中图像

Question

我有一个容器 (.inner)。它包含一个方形 div (.square) 并且是响应式的。我需要将其中的图像垂直和水平居中。我不想使用背景 url 属性。我的 html 标记：

<div class="thumb">
    <div class="square">
        <a href="">
           <img src=""/>
        </a>
    </div>
</div>

我的正方形在 css 中的工作原理：

.thumb {
    position: relative;
    width: 100%;
    }

.square{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow:hidden;
    display: inline-block;
    vertical-align: middle;
    }

目前，我使用 javascript 为图像添加了一个类，用于横向图像，以使带有 css 的纵向和横向图像适应方形容器的高度和宽度。

img {
    max-width: 100%;
    height: auto;
    width: auto;
    }
img.landscape {
    max-width: none;
    height: 100%;
    width:auto!important;
    }

但我不知道如何使它们居中。我已经在这里阅读了很多文章，但没有一篇有效。感谢帮助

这是我正在搜索的图片，如果可能的话，也应该垂直工作：

Answer 1

您的 CSS 试图将 .square 本身而不是包含的图像居中。 margin: auto; 加上图像的绝对定位就可以了。

这是一个显示如何居中的简单示例；您可以修改它以满足您的需要。图像的不透明度降低以显示它在其容器内水平和垂直居中。 JavaScript 为容器的高度和宽度设置动画以模拟响应。

http://jsfiddle.net/6py8o6b8/4/

TweenMax.to($(".square"), 2, {
  width: "100%",
  height: "250px",
  repeat: -1,
  repeatDelay: 1,
  yoyo: true,
  ease: "linear"
});

.square {
  border: 2px solid red;
  height: 100px;
  position: relative;
  width: 100px;
  margin: 70px auto;
}
img {
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
  opacity: 0.5;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square">
  <img src="http://www.collativelearning.com/PICS%20FOR%20WEBSITE/stills%202/black%20screen.jpg" />
</div>

Answer 2

如果您想要其他非 JavaScript 选项，可以尝试在容器上设置 flexbox。

这通常是我在父容器中垂直和水平居中项目的方法。

.thumb {

  justify-content: center;
  align-items: center;
  display: flex;

}

这需要一些前缀来支持所有浏览器，因此设置起来会涉及更多内容，但如果它是整个网站的通用元素，则非常值得学习。

见http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

有一些解决方案，包括 HTML 和 CSS。

如上所述，CSS 提供了 display 属性——它负责您正在寻找的内容。尝试使用它 - 例如：

.MyImageStyle
{
display: block;
// If this doesn't work, feel free to try inline-block, and the other possibilitys.
}

<div class="thumb">
<div class="square">
    <a href="">
       <img src="" class="MyImageStyle"/>
    </a>
</div>

不太优雅的解决方案是在 HTML 中 - 您可以在图像周围使用标签，这可能在某些浏览器中的特定显示下起作用（但它确实取决于元素的相对位置和页面的大小）。一个很好的尝试可能是

<center> The rest goes in here </center>

祝你好运！