Vertically Center A Button Inside A Responsive Container With Pure Css?

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 an

Solution 1:

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">
  <imgsrc="http://placekitten.com/300/200"><divclass="mask center-in-container"></div><buttonclass="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;
}

Solution 2:

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:hoverimg{
     -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.

Solution 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?