中心跨度在圖像上的div容器內部

Question

我的圖像響應大小，我試圖在它們的中心覆蓋播放圖標。我可以垂直居中但不水平放置圖標。

見我jsfidde

HTML：

<div class="img-container"> 
    <img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;"> 
    <div class="post-video-overlay-lg"> 
    <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
    </div> 
</div> 

CSS：

.post-video-overlay-lg { 
    position: absolute; 
    font-size: 72px; 
    color: #E5E5E5; 
    text-align: center; 
    width: 100%; 
} 

.img-container { 
    position: relative; 
    width:315px; 
    height:auto; 
    display:block; 
    margin:auto; 
    cursor:pointer; 
} 

任何想法，我缺少的是什麼？

Answer 1

首先，你必須在圖像/視頻上放置覆蓋div。然後定位跨度。

.post-video-overlay-lg { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    font-size: 72px; 
 
    color: #E5E5E5; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.post-video-overlay-lg span { 
 
    position: absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%, -50%); 
 
} 
 

 
.img-container { 
 
    position: relative; 
 
    margin: auto; 
 
    width:315px; 
 
    cursor:pointer; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.img-container img { 
 
    display: block; 
 
}

<div class="img-container"> 
 
    <img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;" /> 
 
    <div class="post-video-overlay-lg"> 
 
     <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
 

 
    </div> 
 
</div>

JSfiddle Demo

Answer 2

這裏是小提琴：http://jsfiddle.net/f1becapq/3/

更新了CSS的.post-video-overlay-lg

.post-video-overlay-lg { 
    position: absolute; 
    font-size: 72px; 
    color: #E5E5E5; 
    text-align: center; 
    left: 0; 
    right: 0; 
    top: -webkit-calc(50% - 36px); /* 36px = 72px/2 */ 
    top: -moz-calc(50% - 36px); 
    top: calc(50% - 36px); 
} 

使用的CSS calc函數垂直對齊div在運行時