Вертикальные выровнять абсолютные элементы/Flexbox

Question

Каждый раз, когда я решаю проблему с компоновкой, я, кажется, создаю новую. У меня была проблема, которая была очень любезно решена на текстовом слайдере, который я строю. Для сравнения JS-часть была простой. Все, что я хочу сделать, это иметь два абсолютно позиционированных элемента внутри родительского контейнера, которые вертикально выровнены с внешней оболочкой.

Я воссоздан проблема здесь: http://codepen.io/emilychews/pen/oBPjbR

я должен держать определенные элементы, поэтому я не могу избавиться от слайдера обертки, но я хотел бы иметь оба набор текста сидеть вертикальной середины внешнего элемента. Любая помощь была бы прекрасной, чтобы остановить выпадение волос.

.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> 

Эмили

Answer 1

Сначала удалить position:absolute для .bb_slide_text, и если вы хотите, они направо и налево (потому что вы установили как top:0 я думаю, что это) это путь:

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

И если вы хотите, чтобы они были в середине красного экрана по строкам, забудьте эти стили и воспользуйтесь этим:

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

И я увидел еще одну проблему в вашей выборке, я предлагаю использовать это так:

* { 
box-sizing: border-box; 
} 

Answer 2

, если вы хотите использовать absolute внутри контейнера, вы должны установить его relative быть ссылка на детей позиции.

тогда размер, координаты и margin могут сделать все остальное.

.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>

Отсюда следует возражают, что оба коробок могут перекрываться, если ширина не достаточно широк, и что другой брат может стоять в одной и ту же области ... так что будет вашим следующее вопрос :)? вы, возможно, даже не нуждаетесь в абсолютном значении