Javascript 绝对定位布局-上一分区的垂直中心

我的问题的一个简化版本是，我想在屏幕模式下将“文本”div置于“图像”div的中心，但在移动设备上将它们放置在彼此下方

HTML

这是我得到的最接近的。它将文章的“文本单元格”置于屏幕大小的上方，并置于手机大小的下方

我希望它在屏幕大小上垂直居中于“文章”上方，并调整大小“文本单元格”并没有定义大小，理想情况下，我希望文章的大小是一个百分比或更具响应性的大小，但这并不重要

编辑-这个html是Wordpress循环的一部分，这意味着它会被生成一定的次数，并且每一次都堆叠在另一次之下。（例如，3份堆叠的

）

我要干什么

---

我建议做的第一件事是将

.text单元格

div放在文章上方，这样，在移动设备上，它会按照文档的自然层次结构，静态地放置在您希望放置它的位置。这就是我在代码片段中所做的（我还在媒体查询中将其位置更改为

static

）

已经说过，我个人会考虑改变HTML的结构，使其具有更多的语义意义（例如，在<<代码>标题/<代码>标签中放置<代码> H2和<代码> H3<／代码>标签，并将其放置在<代码>文章< /C>标签>）

如果你想得到帮助，请在文章中解释你想要实现的目标，我很乐意帮助你实现你想要的目标

.wrapper{
位置：相对位置；
保证金：0；
填充：0；
}
文章{
高度：350px；
宽度：100%；
边框顶部：1px实心#000；
背景尺寸：封面；
背景重复：无重复；
}
.文本单元格{
位置：绝对位置；
z指数：10；
宽度：100%；
保证金：0；
底部：0；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.文本单元格{
位置：静态；
边框顶部：实心1px#000；
背景色：rgba（2502502501）；
}
}

类别

请提供一个JSFIDLE，然后我们可以帮助去掉那些php垃圾，我们不知道添加了什么类，背景是什么样子，我们不知道文章中是什么，你需要复制呈现的html而不是htlm with php，在没有php的情况下编辑我的答案，这不会影响我想要的结果。我不熟悉JSFIDDLE，我们不知道它不会真正影响它，基本上php在文章中添加了一个特定的背景图像。这就是为什么这篇文章有一个特定的大小，因为它基本上是空的，但我希望它能完整地显示背景图像。我编辑了我的答案，基本上是为了实现这家公司在他们的主页上所做的。标题位于“行”上方，但当您缩放页面时，文本div位于图像下方，在文章之后是我希望它在手机上静态放置的位置。我的代码运行得几乎很好，只是我只使用了“文本单元格”来覆盖文章的顶部并与底部对齐。我想把它放在文章的中心，并添加一张图片来帮助说明我的意图

<div class="wrapper">
  <article> </article>

  <div class="text-cell">
    <h2>Title</h2>
    <h3>Category</h3>
  </div>  
</div>

.wrapper {
 position: relative;
 margin: 0; 
 padding: 0;
}

article { 
   height: 350px;
   width: 100%;
   border-top: 1px solid #000;
   background-size: cover;
   background-repeat: no-repeat;    
}

.text-cell {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0;
  bottom: 0;
}

@media screen and (max-width: 768px) {

.text-cell {
  position: relative;
  border-top: solid 1px #000;
  background-color: rgba(250, 250, 250, 1);
}

}