Javascript 将div置于图像/容器的中心

我已经读了一些关于这方面的不同文章，但由于某种原因，我今天无法集中注意力

在WordPress中，我将在一个div容器中有一个实际的img标记，并希望覆盖文章标题和一些摘录文本，以图像本身为中心

棘手的是。。。我不知道图片的高度，除非我想限制用户和文章标题的长度。使用css作为默认设置，使用jQuery作为增强样式是一种选择

这里有一个虚拟的元素示例

我可能会争取的html结构的混乱。。。

任何想法或链接感谢。谢谢：

html

<div id="contain">
    <img src="http://placehold.it/200x100">
    <div id="over"></div>
</div>

---

此css将水平居中文本，但仍需要固定的顶部或底部位置

<div id="contain">
    <img src="http://placehold.it/200x100">
    <div id="over"></div>
</div>

#contain {
    position: relative;
    width: 200px;
}
#over {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    top: 0;
    left: 50px;
}

.overlay{
   position: absolute; 
   top: 250px; 
   width: 100%; 
   text-align:center;
}: