如何使用 css/html 在图像中居中文本（响应式）答案

【问题标题】：How to center text (responsive) in image using css/html如何使用 css/html 在图像中居中文本（响应式）
【发布时间】：2015-11-30 06:39:21
【问题描述】：

有没有办法在图片中制作响应式文本？我想在不使用媒体查询的情况下做到这一点。我已经尝试过这个Horizontal centering text over image via CSS，但它不起作用。

问题（下图）是当达到小屏幕值时，文本超出图像并且不会调整大小。使用媒体查询，我可以通过更改文本的大小来做到这一点，但没有其他方法可以做到吗？

HTML 代码：

<div class="wrapper-pig">
     <center><img src="http://s24.postimg.org/4axzhhujp/schwein.png" style="width: 70%; height=auto;"/></center>
      <div class="pig-text" >
           <span style="color:white;" >9563</span>
       </div>

</div>

CSS 代码：

.wrapper-pig{
   width: 100%;
   background-color: yellow;
   position: relative;
   box-sizing: border-box;

}

.pig-text{
    font-size: 160%;
    position: absolute;
    display: inline-block;
    left: 40%;
    top: 40%;
}

请帮忙？

我准备了一个小提琴来更好地展示这个问题：My fiddle

【问题讨论】：

<center> 自中世纪以来已被弃用。
所以你也想让文字缩小？
是的，它也应该缩小

标签： html css

【解决方案1】：

你可以让它完美居中：

.pig-text{
  font-size: 160%;
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

【讨论】：

这里，文字没有缩小。
谢谢，这是我的解决方案的一部分 :)

【解决方案2】：

我建议使用响应式字体大小，请在此处查看

https://jsfiddle.net/f11y74ms/

提示来自

Responsive font size according to window width, is it possible with CSS?

命令为vh、vw、vmin，所以以最小视点作为参考。

【讨论】：

谢谢，这对我有帮助。我的最终解决方案是结合您的回答和@Marcos Perez

【解决方案3】：

你可以试试 RobertStettler 所说的。

您可以使用视口值代替 ems、pxs 或 pts。

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，取较小者

1vmax = 1vw 或 1vh，取较大者

.schwein-text{
    font-size: 4vw;
    position: absolute;
    display: inline-block;
    left: 40%;
    top: 40%;
}

Working Demo here

【讨论】：