絶対センターの内容の高さ

Question

.parent { 
 
\t background-color: gold; 
 
\t height: 400px; 
 
\t position: relative; 
 
} 
 
.child { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t padding: .8em 1.2em; 
 
\t color: white; 
 
\t background-color: darkcyan; 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t -moz-transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
\t -o-transform: translate(-50%, -50%); 
 
\t transform: translate(-50%, -50%); 
 
}

<div class="group"> 
 
    <div class="left parent"> 
 
    <div class="child"> 
 
     <h1>helo</h1> 
 
     <span>hi again</span> </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="videoWrapper"> 
 
     <!-- Copy & Pasted from YouTube --> 
 
     <iframe width="560" height="600" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe> 
 
    </div> 
 
    </div> 
 
    <div class="clearer"></div> 
 
</div>

を設定せずに私のコンテンツを中心に、私はそれはそれを「グループ」クラスの完全な高さを利用したいと思います。ここにライブリンクがあります。 velnikolic.com/alohaSpeed私はこれが唯一の方法であることを知っているので、私は他の提案を公開していますが、何らかの理由でそれが唯一の作業コードであることがわかりました。高さがなければ

Answer 1

することができます絶対ないcontent、あなたは今、私はちょうどtransform propertyを削除し、使用して、トップ値を設定し、親のdivの高さを100％またはあなたが必要とするものの高さのいくつかの値を設定する必要がcalc()

.parent { 
 
\t background-color: gold; 
 
\t height: 400px; 
 
\t position: relative; 
 
} 
 
.child { 
 
\t position: absolute; 
 
\t top: calc(50% - 65px); 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 100px; 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: .8em 1.2em; 
 
\t color: white; 
 
\t background-color: darkcyan; 
 
}

<div class="group"> 
 
    <div class="left parent"> 
 
    <div class="child"> 
 
     <h1>helo</h1> 
 
     <span>hi again</span> </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="videoWrapper"> 
 
     <!-- Copy & Pasted from YouTube --> 
 
     <iframe width="560" height="600" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe> 
 
    </div> 
 
    </div> 
 
    <div class="clearer"></div> 
 
</div>

Answer 2

あなたもこれを行うには、フレックスボックスのスタイリングを使用することができます（下記jsFiddle）。必要に応じて、高さの値をパーセンテージに変更することができます（これが何かしたいかどうかわかりませんでした）。 50％ `：

.parent { 
 
\t background-color: gold; 
 
\t height: 400px; 
 
\t position: relative; 
 
     display: flex; 
 
     justify-content: center; 
 
     align-items: center; 
 
} 
 
.child { 
 
\t 
 
\t width: 100px; 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: .8em 1.2em; 
 
\t color: white; 
 
\t background-color: darkcyan; 
 
}

<div class="group"> 
 
    <div class="left parent"> 
 
    <div class="child"> 
 
     <h1>helo</h1> 
 
     <span>hi again</span> </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="videoWrapper"> 
 
     <!-- Copy & Pasted from YouTube --> 
 
     <iframe width="560" height="600" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe> 
 
    </div> 
 
    </div> 
 
    <div class="clearer"></div> 
 
</div>