css设置按钮竖直方向居中_使用纯CSS在响应式容器内垂直居中放置按钮？

So I want to make this thumbnail effect.

$(window).resize(setThumbHeight);

$(window).resize(centerBtn);

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.

解决方案

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.