html - Bootstrap 响应式多行文本叠加

Question

我正在尝试向我的图像添加文本叠加层，但我正在努力使其具有响应性和垂直居中。

这是我得到的地方:http://jsfiddle.net/r8rFc/910/

.img-overlay {
    position: relative;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;

}

.centered-text
{
  display:table;
  height:100%;
  width:100%;
  text-align:center;
  vertical-align:center;
}

我可以水平居中文本，但不能垂直居中...我真的不知道该怎么做。我检查的所有内容要么没有响应，要么只是叠加层中心的 Logo ...

谢谢!

Answer 1

多亏了 Henrique Barcelos，我才得以解决这个问题。 这是提供解决方案的 fiddle :http://jsfiddle.net/r8rFc/912/

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    display:flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

}