javascript - absolute positioning layout - vertical center over previous div -

a simplified version of problem want center 'text' div on 'image' div on screen mode, position them underneath each other on mobile.

html

<div class="wrapper">   <article> </article>    <div class="text-cell">     <h2>title</h2>     <h3>category</h3>   </div>   </div> 

css

.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 , (max-width: 768px) {  .text-cell {   position: relative;   border-top: solid 1px #000;   background-color: rgba(250, 250, 250, 1); }  } 

this closest got. puts 'text-cell' overtop of article @ screen size , underneath on mobile size.

i want vertically centred on 'article' on screen size, resizes. 'text-cell' doesn't have defined size, , ideally i'd article percentage or more responsive size, isn't important.

edit - html part of wordpress loop, meaning generated amount of times, , each 1 stacked under other. (for ex. 3 copies of < div class="wrapper" > stacked)

what going for

the first thing i'd recommend doing placing .text-cell div above article, way, on mobile, it's statically want placed, following document natural hierarchy. i've done in code snippet (i've changed position static inside media query.)

having said that, consider changing structure of html have more semantic meaning (for example, placing h2 & h3 tags inside header tag , place inside article tag.)

if want doing that, explain you're trying achieve inside article, , i'm happy achieve you're looking for.

.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 , (max-width: 768px) {    .text-cell {      position: static;      border-top: solid 1px #000;      background-color: rgba(250, 250, 250, 1);    }  }

<div class="wrapper">    <div class="text-cell">      <h2><a href="" rel="bookmark">the title</a></h2>      <h3>the category</h3>    </div>      <article style="background-image:url('http://placehold.it/300x300');">      </article>  </div>