Html 图像上方div容器内的中心跨距

我的图片在大小上反应灵敏，我正试图在它们的中心覆盖一个播放图标。我可以垂直居中图标，但不能水平居中

看我的

HTML:

---

你知道我遗漏了什么吗？

首先你必须在图像/视频上定位覆盖div，然后定位span

。发布视频覆盖lg{
位置：绝对位置；
排名：0；
左：0；
字体大小：72px；
颜色：#E5；
文本对齐：居中；
宽度：100%；
身高：100%；
}
.post视频覆盖lg span{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.img集装箱{
位置：相对位置；
保证金：自动；
宽度：315px；
光标：指针；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
}
.img容器img{
显示：块；
}

这是小提琴：

更新了

的css。发布视频覆盖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

你是说@jbutler483很近，但是如果我将图像高度更改为277px，图标将不再居中…你是说图像？或者glyphicon？抱歉，glyphicon使用calc css来实现类似的功能（如果glyphicon更改高度）。但这只是一个值得注意的问题；边界半径上的那些供应商前缀实际上不再需要了引导css没有链接这就是为什么添加了fiddle链接。啊…明白了。工作完美！谢谢@jbutler483谢谢修复。@Paulie_D:您还保留了带前缀的边界半径属性，我相信这些属性不再是必需的。但那完全是另一回事儿P@jbutler483...I“我正在使用OPs代码…我将只调整修复原始问题所需的内容…但谢谢。

.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;
}

.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);
}