在背景图像上对齐文本而不定位答案

【问题标题】：Align text on background image without positioning在背景图像上对齐文本而不定位
【发布时间】：2017-03-01 23:20:15
【问题描述】：

我想将我的文本准确地定位在我的背景图像的中心，而不使用和定位相对或绝对。大多数在线答案都使用绝对位置作为文本和顶部。但我不想使用任何定位

【问题讨论】：

给我们你尝试的例子
stackoverflow.com/help/how-to-ask - 分享你的工作代码！因为你，有人可能会因为他试图回答而获得反对票
stackoverflow.com/questions/8865458/…

【解决方案1】：

你试过了吗：

margin: 0 auto;
text-align: center;
vertical-align: middle;

【讨论】：

It 属性的应用有限。仅适用于“inline-level 和 'table-cell' 元素”
还有另一种方法，使用 jquery 将您的文本边距设置为等于 (parrentHeight - yourTextHeight)/2。我知道的就这些
这只是一个简单的居中元素。使用其他技术是可能的，但是是多余的。
我找到了一个替代问题，希望对stackoverflow.com/questions/8865458/…有帮助
我已经说过 line-height 是最可靠的解决方案之一。

【解决方案2】：

您还可以使用内联边距（顶部、底部、右侧或左侧）来定位您想要的图像位置。您只需将您的边距设置为 px(es margin:10px)，然后您可以在浏览器上在线尝试（通常只需按 F12，屏幕上就会显示所有信息）

【讨论】：

【解决方案3】：

你可以使用 flex。

.container {
    display: flex;
    width: 350px;
    height: 350px;
    background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
}

.item {
    background-color: white;
    width: 80px;
    height: 80px;
    margin: auto;
}

<div class="container">
  <div class="item">Sample Text</div>
</div>

【讨论】：

使用不灵活。 IE 仅从 11 版本开始部分支持它。
可以带前缀支持。看到这个链接：w3schools.com/css/css3_flexbox.asp
没有必要仅仅因为想要简单的解决方案就乱扔代码。
但事实是，答案是正确的。你不能投票。而且你什么也没指定
当然没错。我们正在讨论该方法的可行性。

【解决方案4】：

使用 Flexbox 很容易解决问题

.test{
  background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;
  }

&lt;div class="test"&gt;Hello World&lt;/div&gt;

【讨论】：

它的 css，每个浏览器的行为都不同.. 如果你想要完全支持使用 JavaScript，或者你可以检查这个stackoverflow.com/questions/17447807/…@ArtemSolovev 标记其他人的答案 -1 对你没有帮助。特别是当它解决问题时......并且没有指定用户特定的浏览器要求
@ArtemSolovev 世界在向前发展，有些编译器会自动生成浏览器支持，所以.. 代码不会被污染，您只需编写原始的 flex 版本...