Vertical Align Absolute Elements/Flexbox

Question

レイアウトの問題を解決するたびに、私は新しいものを作成しているようです。私は構築しているテキストスライダで非常に親切に解決された問題がありました。比較するとJSの部分は簡単でした。私がしたいのは、外側のラッパーと垂直に整列された親コンテナの中に2つの絶対配置された要素があることだけです。

私はここでの問題を再作成しました

：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

まず.bb_slide_textためposition:absoluteを削除して、あなたがしたい場合、彼らは（あなたが両方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を設定する必要があります。

サイズ、coordonatesと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>

ここから、あなたは幅が十分に広いものではなく、他の兄弟が同じエリアに立っできるのであれば両方のボックスが重なってできることを気にしなければならない...ので、どのようなつもりはあなたの次のことです質問 ：） ？ あなたは最初の場所で絶対的なものでなくてもいいかもしれません。