Vertically center a button inside a responsive container with pure CSS?

Question

So I want to make this thumbnail effect.

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

SEE HERE

As you can see I wrote some JQuery to set the container height and center the btn, which I think is pretty dumb.

I have a few questions:
1. How can I maintain the aspect ratio of the container without using JQuery.
2. How could I center the button vertically inside the container using pure CSS? (It seems someone had it done with table and table-cell)
3. Why background url is not working? (I have the line commented out in the CSS.)

Thanks guys.

Answer 1

You can center an element vertically with this trick:

change value of margin if you change width or height of your button.

-17px is half of height and -30px is half of width

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

and for zoom on picture you can use this:

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

and if you want display your picture with background css property, you must have height on your container .my-thumbnail.

Answer 2

Here's a simple cross-browser method to achieve what you're looking to do:

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

I didn't bother with any of the CSS transitions, just focused on the centering. To maintain the container dimensions, only set the width of the outer thumbnail container, the height will automatically flex to fit. Also, the background url does seem to be working, the image itself was covering the background in your fiddle.

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 3

Hashbug,

Aside from a JavaScript method, which, you have employed - there are no dynamic, cross-browser compatible solutions for what you are attempting to do.

If you still do not wish to use JavaScript, and are O.K. with this not working cross-browser, then you may want to take a look at CSS3's flexbox. As I said the flexbox is not supported by all browser versions yet, you can find out which here: caniuse.com. I made a fiddle to show your solution updated with flexbox here:

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

I did not include any of the "hacks" as other users have posted because they generally will cause you much more strife than is needed - your solution is the easiest compared to these. May I ask why you need to use the flexbox?