相同的CSS，不同的结果（Bootstrap4，仅限Chrome） 我在我的网站上有图片，标题在中间显示悬停。相同的HTML，每个应用相同的CSS。它在大多数浏览器中都可以正常工作，除了Chrome，Chrome只有第一列图像可以正常工作，其余的都被破坏了

---

Firefox和Edge工作正常，即使IE也可以

您需要将

img字幕上的transform属性更改为
translate3d（-50%，100%，0）

编辑：

关于容器上的悬停问题，这是由于
列计数
属性引起的。将
.gal3
类改为使用flex属性可以解决此问题

.gal3 {
  display: flex;
  flex-flow: row wrap;
}

.gal3 .gal-container {
  width: 33%;
}

如果您也想将图像居中，可以使用与您已经使用的相同的
align middle
类。
您可以尝试此代码，
You can try this code,

<div class="img-caption">
 <div>
  <b>W filament</b>
  <p>3.08.1.100.m.o</p>
 </div>
</div> 

<style>
.img-caption {
    position: absolute;
    color: white;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}
</style>

钨丝
3.08.1.100.m.o

.img标题{
位置：绝对位置；
颜色：白色；
字体大小：15px；
字体大小：400；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
身高：100%；
宽度：100%；
}
试试这个

.img标题{

position: relative;
color: white;
font-size: 15px;
font-weight: 400;
vertical-align: middle;
text-align: center;
margin: 10px auto;
top: 2em;
left: 0;
transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%) -moz-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
display: inline;

}
对我来说，在Chrome和Firefox中看起来是一样的。也许你需要强制重新加载？（CTRL+Shift+R）谢谢，这部分可以做到！标题现在显示正确，但我需要将鼠标悬停在标题上方，而它应该可以在图像容器上的任何位置工作。（第一栏是这样的）@TomášBlinkyHoněk更新了我的答案，以帮助您解决这个问题。Flex确实使用hover解决了这个问题，但是行换行会破坏布局。列包装似乎是一种方式，但如果没有已知的高度，它将无法工作。