center button inside a fluid div - html

Question

I am having a tricky(at least for me) problem with a div which is a flip card done purely in css. The front of the card shows an image and the back has a different image and a button. The problem is due to the fluid design I had to set the padding. Which places all of the text below the div
.card {
margin: 0 auto;
position: relative;
float: left;
padding-bottom: 25%;
width: 100%;
max-width: 600px;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.7s;
transition: transform 0.7s;
}
.card__front {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
padding-top: 56.25%;
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card__back {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
padding-top: 56.25%;
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card__text {
width: auto;
text-align: center;
height: 100%;
margin-top: -32%;
}
.button {
background-color: #000000;
text-indent: 0;
border: 1px solid #000000;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 21px;
font-weight: normal;
font-style: normal;
height: 69px;
line-height: 69px;
width: 200px;
text-decoration: none;
text-align: center;
opacity: 0.8;
}
.button:hover {
background: -webkit-gradient(linear, left top, left bottom, color- stop(0.05, #000000), color-stop(1, #000000));
background: -moz-linear-gradient(center top, #000000 5%, #000000 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color: #000000;
}
.button:active {
position: relative;
top: 1px;
}
<div class="card effect__hover">
<div class="card__front">
<div class="card__text"></div>
</div>
<div class="card__back">
<div class="card__text"> see more
</div>
</div>
</div>
<!-- /card -->
Here is the preview of the code: http://jsfiddle.net/j29mvoLm/
All I am trying to get is to center the same button in every card like div.
Is it possible to do it without using negative margin?

Answer 1

This should do you justice:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
or
display: table-cell;
vertical-align: middle;

Answer 2

It is possible. See snippet. This answer uses nested relative and absolute positioned elements and also utilized box-sizing:border-box; and padding to maintain aspect ratio.
If you need to to set a max-width, add another wrapper element around your card and set the max-width on that element.
.card-wrapper {
margin: auto;
max-width: 600px;
}
.card {
box-sizing: border-box;
margin: auto;
padding: 28.125% 50%; /* 16:9 aspect ratio */
position: relative;
width: 100%;
}
.card__front, .card__back {
bottom: 0;
height: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.card__front, .card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.7s;
transition: transform 0.7s;
}
.card__front {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card__back {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card__text {
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.button {
background-color: #000000;
border: 1px solid #000000;
bottom: 0;
color: #ffffff;
display: block;
font-family: Arial;
font-size: 21px;
font-style: normal;
font-weight: normal;
height: 69px;
left: 0;
line-height: 69px;
margin: auto;
opacity: 0.8;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
text-indent: 0;
top: 0;
width: 200px;
}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
}
.button:active {
position:relative;
top:1px;
}
<div class="card-wrapper">
<div class="card effect__hover">
<div class="card__front">
<div class="card__text"></div>
</div>
<div class="card__back">
<div class="card__text"> see more </div>
</div>
</div><!-- /card -->
</div>