使用flexbox将文字居中

Question

我想在悬停图像上添加居中文本。

这就是我所拥有的。

我尝试使用强制向上移动文本margin-top，但是页面调整大小后的结果不一致。

有什么想法可以使此文本居中吗？

.featuredText {
  position: absolute;
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  text-align: center;
}

<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
  <div class="centeredText">text</div>
</div>

Answer 1

#container {
    display: inline-flex;
    position: relative;      /* establish nearest positioned ancestor for abspos */
    cursor: pointer;
}

.centeredText {
    display: none;
}

#container:hover > .centeredText {
    display: inline-block;
    font-size: 4em;
    color: white;
    position: absolute;               /* remove from document flow */
    left: 50%;                        /* center horizontally */
    top: 50%;                         /* center vertically */
    transform: translate(-50%,-50%)   /* tweak for precise centering; details:
                                       http://stackoverflow.com/q/36817249 */
}

<div id="container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
  <div class="centeredText">text</div>
</div>

jsFiddle