Html 如何水平居中位于绝对位置的收割台

我试图在图像顶部水平和垂直居中放置标题。到目前为止，我已经得到了垂直居中向下（这是相对和绝对定位的原因）。然而，水平定心现在给我带来了问题：

margin:0 auto不起作用，
左：50%不起作用，
文本对齐：居中
不起作用。有人知道如何将标题水平居中放置在图像顶部吗

详情：


我不知道任何元素的高度或宽度，所以我不能使用固定的高度或宽度
将图像设置为背景不是一个选项，因为图像是内容的一部分
并非所有标题的长度都相同，因此我必须找到一个动态解决方案（虽然它们都是一行，但我将用省略号将它们切掉）

HTML

它在这里：
您可以将
文章设置为
显示：内联块
和
宽度：自动
，然后将
h2
居中：
您可以将
文章
设置为
显示：内联块
和
宽度：自动
，然后将
h2
居中：
哇，太棒了！也可以在html的顶部使用h2吗？因为如果我改变顺序，它就会消失。这是为什么？我看到z-index修复了它，我不明白为什么，但至少我可以修复：）这只是因为定位。可以这样做：只需将
h2
的
z-index
设置为更高的值，如
1
。感谢您的快速回答！我忘了一件事：我有一个div，当它超过屏幕宽度时会裁剪图像，现在解决方案不起作用。我把它放在这儿了。你有办法解决这个问题吗？哇，太好了！也可以在html的顶部使用h2吗？因为如果我改变顺序，它就会消失。这是为什么？我看到z-index修复了它，我不明白为什么，但至少我可以修复：）这只是因为定位。可以这样做：只需将
h2
的
z-index
设置为更高的值，如
1
。感谢您的快速回答！我忘了一件事：我有一个div，当它超过屏幕宽度时会裁剪图像，现在解决方案不起作用。我把它放在这儿了。你有办法解决这个问题吗？
<article>
    <h2>Title</h2>
    <img src="http://bit.ly/gUKbAE" />
</article>

article { 
    position: relative; 
}

h2 {
    line-height: 0;
    position: absolute;
    top: 50%; 
    left: 0;
    margin: 0;
    padding: 0;
}