html - 使 div 在图像上居中

Question

我在这里四处搜索并得到了很多答案，但它们似乎都不起作用。我所拥有的是一个带有图像填充 div 的 div(100% 以使其响应)。现在我想在图像上添加一些信息，所以我使用了一篇文章。但我的问题是，当我缩小我的页面时，我无法让我的文章保持在图像的中心(水平和垂直)。它在水平方向上很好地居中，但在垂直方向上它只是出去了，扰乱了下面的部分(尽管我还没有研究过它们)。任何解决方案表示赞赏。谢谢。

HTML:

    <div class="featuredpost">
    <img src="images/forest.jpg">

    <div  class="featured"> 
        <article>
            <header>
                <h1><a href="#">Featured Post Goes Here</a></h1>
            </header>

            <footer>
                <p class="postedby">Postedby User</p>
            </footer>

            <content>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </content>

            <button type="button" onclick="alert('Hello world!')">Read More</button>
        </article>  
    </div>  
</div>

CSS:

.featuredpost{
width: 100%;
margin: 0 auto; 
}

.featuredpost img{
    width:100%; 
    height: auto;
    position: relative;
}

.featured{
    margin: 0 auto;
    width: 80%; 
    background-color: rgba(0,0,0,0.5);  
    color: #fff;    
    top:50%;
    position: absolute;
    left: 10%;
}

.featured article{
    padding: 10px 30px;
}

Answer 1

HTML

<div id="container">
  <div id="overlay"></div>
  <img id="img" />
</div>

CSS

#container {
    position: relative;
}
#overlay, #img {
    position: absolute:
    top: 0px; left: 0px;
}
#overlay {
    z-index: 5;
}