2
我在这里搜索并得到了很多答案，但他们似乎并没有工作。我所拥有的是一个div图像填充div（100％使其响应）。现在我想在图片上放一些信息，所以我用了一篇文章。但我的问题是，当我缩小页面时，无法让我的文章保持在图像的中心（水平和垂直）。它在水平方向居中，但是垂直居中，破坏下面的部分（尽管我还没有研究过它们）。任何解决方案是赞赏。谢谢。将div对准图像
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;
}
简短回答：在CSS中垂直居中很困难。虽然有几种可能的解决方法，但CSS并没有真正的**方法。 JavaScript解决方案存在，虽然... – Stobor
是否有一个原因，你为什么不把图像设置为div的背景？ – sanjaypoyzer
@sanjaypoyzer是的，我想图像改变（排序滑块）。 – Delete