中心div水平和垂直裏面另一個div

Question

我有一個關於在另一個div水平和垂直居中元素的問題。

我在網站上工作的客戶，並且這裏是給我找麻煩的頁面：http://staging.slackrmedia.com/halfpast/brand_collection_bremont.html

因此，當你將鼠標懸停在圖片，你看到一個鏈接，說「觀集」。我正在使用CSS3轉換和不透明度來設計它，但我遇到了一個問題：我需要此「View Collection」鏈接，以便在其所在的div內水平和垂直居中。

這裏是一個鏈接到的jsfiddle我的代碼：http://jsfiddle.net/T2n5b/4/

HTML

<h2>Bremont Collections</h2> 

<div class="row text-center uppercase"> 
    <div class="col-1-3"> 
     <img src="http://staging.slackrmedia.com/halfpast/images/watches/alt1-p.png" alt="ALT1-P Pilot" /> <a href="" class="btn small">View Collection</a> 
     <a href="">ALT1-P Pilot</a> 
    </div><!-- .col-1-3 --> 

    <div class="col-1-3"> 
     <img src="http://staging.slackrmedia.com/halfpast/images/watches/solo-37.png" alt="Supermarine" /> <a href="" class="btn small">View Collection</a> 
    <a href="">Solo-37</a> 

    </div><!-- .col-1-3 --> 

    <div class="col-1-3"> 
     <img src="http://staging.slackrmedia.com/halfpast/images/watches/bc-f1.png" alt="BC-F1" /> <a href="" class="btn small">View Collection</a> 
     <a href="">BC-F1</a> 
    </div><!-- .col-1-3 --> 
</div><!-- .row --> 

CSS

/* Buttons 
    ============================= */ 
.btn { 
    background: #c60202; 
    border-bottom: 1 px solid rgba(0, 0, 0, 0.1); 
    border: 0; 
    color: #fff; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 1em; 
    height: 45px; 
    line-height: 2.9; 
    margin: 0px; 
    padding: 0 40px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: bottom; 
    width: auto; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 
.btn:hover { 
    background: #d31d1c; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05))); 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 
    background-repeat: repeat-x; 
} 
.btn.small { 
    font-size: 0.9em; 
    line-height: 2.4; 
    height: 35px; 
    padding: 0 15px; 
} 
a.btn { 
    color: #fff; 
    text-decoration: none; 
} 
/* 
* Type Styles 
*/ 
.text-center { 
    text-align: center; 
} 
.uppercase { 
    text-transform: uppercase; 
} 
/* Grid 
    ============================= */ 
*, *:after, *:before { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.row { 
    margin-left: -20px; 
} 
.row:after { 
    clear: both; 
    content:""; 
    display: table; 
} 
/* 
* Grid Gutters 
*/ 
[class*='col-'] { 
    float: left; 
    padding-left: 20px; 
} 
.row-pad { 
    padding: 20px 0 20px 20px; 
} 
.row-pad[class*='col-']:last-of-type { 
    padding-right: 20px; 
} 
/* 
* Grid Columns 
*/ 
.col-1-3 { 
    width: 300px; 
} 
/* 
* Button Hover 
*/ 
.row .col-1-3 img { 
    display: block; 
    width: 163px; 
    height: 276px; 
    margin: 0 auto 10px; 
} 
.row .col-1-3 a.btn.small { 
    font-size: 0.75em; 
    margin: -165px 0 0 -80px; 
    opacity: 0; 
    position: absolute; 
} 
.row .col-1-3 a.btn.small:hover { 
    opacity: 1; 
} 

與HTML，CSS任何解決方案，或jQuery是非常好。我認爲我目前使用的HTML和CSS可能只是一個小問題，但我無法弄清楚。

Answer 1

將寬度和高度添加到.btn，然後添加位置：絕對;左：50％;頂部：50％;最後 - 保證金：-50％.btn高度0 0 -50％.btn寬度

類似的東西

.btn.small { 
    width:140px; 
    height:36px; 
    margin:-18px 0 0 -70px; 
    position:absolute; 
    left:50%; 
    top:50%; 
} 

還有一小建議： 代替.btn：在徘徊這種情況下，更好地利用.COL-1-3：懸停.btn

或包裹IMG和.btn在另一個div例如.IMG箱，並設置規則.IMG盒：懸停.btn

Answer 2

使用jquery 你可以test at jsFiddle 調整保證金您的喜好

$(".col-1-3 img").hover(function(){ 
    var $viewCollection = $(this).next(); 
    $viewCollection.attr("id","selectedVC"); 
    $viewCollection.css({"margin-top": "-165px","margin-left": "68px"}); 
    $viewCollection.show(); 
}); 

$(".col-1-3 img").mouseleave(function(){ 
    var $viewCollection = $(this).next(); 
    if(idIsHovered("selectedVC") == false){ 
    $viewCollection.removeAttr("id"); 
    $viewCollection.hide(); 
    } 
}); 

function idIsHovered(id){ 
    return $("#" + id + ":hover").length > 0; 
} 

$(function(){ 
    $(".btn.small").hide(); 
}); 

確保喲有jQuery的引用到你的頁面 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>