垂直私は現在、このHTMLを持って未知の高さDIV

Question

内DIVセンタリング：

<div id:root> 
    <div id:contents> 
    <h3>I am the one that need to be vertical centered.</h3> 
    <p>Lorem300..............</p> 
    </div> 
    <img scr:"somewhere.jpg"></img> 
</div> 

と現在のSASS：

img 
    width: 100% 
    height: inherit 

私が解決したい問題は、私は「ルート」をしたいですDIVはimgとまったく同じサイズを持ちます。この場合、imgの幅は100％に設定されます。つまり、ビューポートの幅は常に100％です。 「コンテンツ」DIVを「ルート」DIVに垂直方向に集中させる方法はありますか？どうもありがとうございました。私は一日を過ごしましたが、まだ何も見つかりませんでした。私が使っていても：

#contents 
    top: 50% 
    transform: translateY(-50%) 

'contents' divは 'root' divではなくbodyの高さです。 :(

は、私はこの問題を解決することができる方法はありがとう？あります！

Answer 1

.center_block{ 
 
\t position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<div class="center_block"> 
 
    <div> 
 
    <h3>I am the one that need to be vertical centered.</h3> 
 
    <p>Lorem300..............</p> 
 
    </div> 
 
    <img scr="somewhere.jpg" class="img-responsive" /> 
 
</div>

Answer 2

あなたは#contents

は単純で#rootを設定センタリングを助けるためにcss flexboxを使用することができますこれらの特性

#root { 
    position: relative; /* needed to position img absolutely with div */ 
    display: flex; /* make this element flexbox */ 
    justify-content: center; /* horizontally center children */ 
    align-items: center; /* vertically center children */ 
} 

その後#contentsを与え、imgこれらのプロパティ

#contents { 
    position: relative; /* needed to set z-index */ 
    z-index: 2; /* make #contents above img */ 
} 

img { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
} 

は、例えばthis fiddleを参照してください。上記のリンクから、css flexboxの詳細を読むことができます。このことができます

希望、