中心（垂直）一个span元素

Question

我在div中有一个跨度，我试图将它居中（即我希望跨度内的文本[为什么学习音乐]直接位于div的中心（水平和垂直）。到目前为止，对齐不起作用。 附件是文本当前状态的图片。 JS小提琴：

<iframe width="100%" height="300" src="http://jsfiddle.net/Cheetaiean/qzd8k9uf/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

照片：

Answer 1

我尝试将后续内容添加到文本或范围

margin-top:-350px; 

它工作正常，它会对你有效，如果没有，那么将跨度更改为div并将相同的边距添加到负值并完成

Answer 2

尝试使用假图像：

<img width="0" height="the height of the container div" align="middle" />

应该这样做。

Answer 3

您可以使用flexbox。

div {display:flex; justify-content:center;} /*vertical align*/

span {align-self:center;} /*horizontal align*/

这会将你的跨度定位在你的div中间。