流體div中的中心按鈕

Question

我對div有個棘手的問題（至少對我來說），這是一個純粹用css完成的翻轉卡。卡的正面顯示圖像，背面有不同的圖像和按鈕。問題是由於流體設計我必須設置填充。哪些地方所有的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"> <a href="http://google.co.uk" class="button">see more</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /card -->

這裏下面的文字是代碼的預覽：http://jsfiddle.net/j29mvoLm/

所有我想要得到的是在每一個卡中心的同一按鈕像div一樣。 有沒有可能做到這一點，而不使用負餘量？

Answer 1

這應該做你正義：

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

或

display: table-cell; 
vertical-align: middle; 

Answer 2

這是可能的。見snippet。此答案使用嵌套的相對和絕對定位元素，並且還使用box-sizing:border-box;和填充以保持寬高比。

如果您需要設置最大寬度，請在卡上添加另一個包裝元素，並在該元素上設置max-width。

.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"> <a href="http://google.co.uk" class="button">see more</a> </div> 
 
    </div> 
 
</div><!-- /card --> 
 
</div>