Vertical Align Absolute Elements / Flexbox

Question

Each time i solve a layout problem I seem to be creating a new one. I had an issue that was very kindly solved on a text slider i'm building. The JS part was easy by comparison. All I want to do is have two absolutely positioned elements inside a parent container that are vertically aligned with the outer wrapper.

I've re-created the problem here: http://codepen.io/emilychews/pen/oBPjbR

I have to keep certain elements, so I can't get rid of the slider wrapper, but I would like to have both sets of text sit in the vertical middle of the outer element. Any help would be awesome to stop my hair falling out.

.outerwrap {
background:red;
width: 100%;
height: inherit;
padding: 10% 5%;
}
.bb_slide_text2 {
position: absolute;
top: 0;
padding-top: 10%;
}

<section class="outerwrap">
  <div class="bb_slidetextwrapper2">
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

Emily

Answer 1

Firstly remove position:absolute for .bb_slide_text , and if you want they are right and left (because you set both top:0 i think this) it is the way:

.bb_slidetextwrapper2 {
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
}

And if you want they are middle of red screen line by line, forget the above styles and use this one:

.bb_slidetextwrapper2 {
display: flex;
justify-content: space-between;
padding: 0 30px;
flex-direction: column;
justify-content: center;
align-items: center;
}

And i saw another problem in your sample, i suggest to use this so:

* {
box-sizing: border-box;
}

Answer 2

if you want to use absolute inside a container, you should set it relative to be the reference to position children.

then size, coordonates and margin can do the rest .

  .outerwrap { background: red; width: 100%;/* a false good idea, no need but if used mind box-sizing */ box-sizing: border-box;/* this includes padding and border into width calculation */ height: inherit; padding: 10% 5%;/* here comes the padding to add or not to width ... */ position: relative;/* helps to hold absolute child */ } h2, p { margin: 0; } .bb_slide_text { position: absolute; top: 0; bottom: 0; margin: auto; height: 3em; } .bb_slide_text2 { right: 5%; } 

 <section class="outerwrap"> <!-- slide wrapper --> <div class="bb_slidetextwrapper2"> <!-- first slide --> <div class="bb_slide_text bb_slide_text1"> <h2>First Heading</h2> <p>First line of text</p> </div> <!-- second slide --> <div class="bb_slide_text bb_slide_text2"> <h2>Second Heading</h2> <p>Second Line of text</p> </div> </div> </section> 

From here , you should mind that both boxes can overlap if width is not wide enough and that other sibling can be standing in the same area ... so what's gonna be your next question :) ? you might not even need absolute in the first place