使用 flexbox 在图像上居中文本 [重复]答案

【问题标题】：Center text over images with flexbox [duplicate]使用 flexbox 在图像上居中文本 [重复]
【发布时间】：2016-09-15 15:05:51
【问题描述】：

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

这就是我所拥有的。

我尝试使用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>

【问题讨论】：

标签： html css flexbox

【解决方案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

【讨论】：

效果很好。谢谢。

【解决方案2】：

编辑/更改：

https://codepen.io/anon/pen/NNZPwg

（仅在左侧的第一张图片上）

做到这一点：

.featuredText {
  display: inline-block;
  position: absolute;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 24px;
  background: #fa0;
}

并将position: relative; 添加到header div

top: 50% 将其向下移动到容器高度的 50%，transform:translateY(-50%);将其向后移动到文本块高度的 50%，这会导致垂直居中。 left:50% 和 translateX(-50%) 进行水平居中。

【讨论】：

【解决方案3】：

不要在文本上使用 flex。它不是那样工作的。 Flex 用于父元素。

您可以通过将相对位置添加到父级然后将绝对定位的文本居中来更容易地做到这一点。

我稍后会添加一个代码示例。

.image-container {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  line-height: 0;
}
.centeredText {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align:center;
  line-height: 1.2;
}

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

【讨论】：