使用纯 CSS 在响应式容器中垂直居中按钮？

Question

所以我想做这个thumbnail effect。

$(window).resize(setThumbHeight);
$(window).resize(centerBtn);

SEE HERE

如您所见，我编写了一些 JQuery 来设置容器高度并将 btn 居中，我认为这很愚蠢。

我有几个问题：
1.不使用JQuery如何保持容器的纵横比。
2. 如何使用纯 CSS 在容器内垂直居中按钮？ （似乎有人用表格和表格单元完成了它）
3. 为什么后台网址不起作用？ （我在 CSS 中注释掉了这一行。）

谢谢各位。

Answer 1

这是一个简单的跨浏览器方法来实现您想要做的事情：

http://codepen.io/aecend/pen/KEvBa

我没有处理任何 CSS 过渡，只关注居中。要保持容器尺寸，只需设置外部缩略图容器的宽度，高度会自动调整以适应。此外，背景网址似乎确实有效，图像本身覆盖了您小提琴中的背景。

HTML

<div class="thumbnail">
  <img src="http://placekitten.com/300/200">
  <div class="mask center-in-container"></div>
  <button class="button center-in-container">Enter</button>
</div>

CSS

.thumbnail {
  width: 30%;
  position: relative;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.center-in-container {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.button {
  width: 50px;
  height: 30px;
  display: none;
}
.mask {
  background-color: rgba(0,0,0,0.3);
  display: none;
}
.thumbnail:hover .button {
  display: block;
}
.thumbnail:hover .mask {
  display: block;
}

Answer 2

你可以用这个技巧使元素垂直居中：

如果您更改按钮的宽度或高度，则更改边距值。

-17px 是高度的一半，-30px 是宽度的一半

.thumbnail-mask .btn{
    position:absolute;
    top:50%;
    left:50%;
    margin:-17px -30px;
}

对于放大图片，你可以使用这个：

.my-thumbnail:hover img{
     -webkit-transform:scale(1.5);
     -moz-transform:scale(1.5);
     -o-transform:scale(1.5);
     -ms-transform:scale(1.5);
     transform:scale(1.5);
 }

如果你想用背景css属性显示你的图片，你的容器上必须有高度.my-thumbnail。

Answer 3

哈希虫，

除了您使用的 JavaScript 方法之外，没有针对您尝试执行的操作的动态、跨浏览器兼容的解决方案。

如果您仍然不想使用 JavaScript，并且可以。由于这个不能跨浏览器工作，那么你可能想看看 CSS3 的 flexbox。正如我所说的，所有浏览器版本还不支持 flexbox，你可以在这里找到：caniuse.com。我做了一个小提琴来展示你的解决方案在这里用 flexbox 更新：

http://jsfiddle.net/jpatterson69/z8uCK/

.thumbnail-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,0.4);    
    opacity: 0;

  -webkit-transition: opacity 0.3s ease-out;
     -moz-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
      -ms-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}

我没有包括其他用户发布的任何“黑客”，因为它们通常会给您带来比需要的更多的冲突 - 与这些相比，您的解决方案是最简单的。请问为什么要使用flexbox？