別のdiv内の2つの異なるdiv内のテキストを整列する

Question

2つのdiv内のテキストを垂直に整列しようとしています。私はここで見つけたいくつかの解決策を試しましたが、必要な結果を生むものはありません。私はsjFiddleをcratedいる

：

#outer { 
 
    position: relative; 
 
} 
 

 
#inner1 { 
 
    position: absolute; 
 
    align-items: center; 
 
    top: 10%; 
 
    bottom: 10%; 
 
    width: 100%; 
 
    height: 40%; 
 
} 
 

 
#inner2 { 
 
    position: absolute; 
 
    align-items: center; 
 
    top: 50%; 
 
    bottom: 10%; 
 
    width: 100%; 
 
    height: 40%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
#outer { 
 
    background-color: purple; 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 

 
#inner1 { 
 
    background-color: yellow; 
 
} 
 

 
#inner2 { 
 
    background-color: red; 
 
}

<div id="outer"> 
 
    <div id="inner1"> 
 
    Test text 1 
 
    </div> 
 
    <div id="inner2"> 
 
    Test text 1 
 
    </div> 
 
</div>

は、誰もが、私は私のバイオリンのコードに基づいてこれを行うことができますどのように見ることができます。 お時間をいただきありがとうございます。

Answer 1

これは達成しようとしているのと似ていますか？

#outer { 
 
    height:100%; 
 
    padding:10% 0; 
 
    box-sizing:border-box; 
 
} 
 

 
#inner1 { 
 
    height:50%; 
 
    width:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 

 
#inner2 { 
 
    height:50%; 
 
    width:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 
html, body { height: 100%; } 
 
#outer { 
 
    background-color: purple; 
 
} 
 
#inner1 { 
 
    background-color: yellow; 
 
} 
 

 
#inner2 { 
 
    background-color: red; 
 
}

<div id="outer"> 
 
    <div id="inner1"> 
 
     Test text 1 
 
    </div> 
 
    <div id="inner2"> 
 
     Test text 1 
 
    </div> 
 
</div>

私は、内側のdivから位置を削除し、それらflexboxes作られ、これ私たちは、コンテンツの正当化と合わせ、アイテムを水平方向と垂直方向のセンタリングを達成するために使用できるようにしています。