フレックスボックスが垂直にセンタリングされないのはなぜですか？

Question

ブラウザでビデオフレームを縦横に並べて表示しようとしています。ここでは、ビデオセンターではなく、縦方向、横方向に

body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
#frame { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.video { 
 
    width: 80%; 
 
}

<div id="frame"> 
 
    <div class="video"> 
 
    <iframe width="1200" height="675" src="https://www.youtube.com/embed/dQw4w9WgXcQ?ecver=1" frameborder="0"></iframe> 
 
    </div> 
 
</div>

...私が持っているものです。

Answer 1

要素#frameは、コンテンツ（.video）のように同じ高さを取得します。

body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 
#frame { 
 
    border:1px dotted red; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
.video { 
 
    border:1px dotted blue; 
 
    line-height:0; 
 
    width:80%; 
 
}

<div id="frame"> 
 
    <div class="video"> 
 
    <img src="https://placehold.it/100x75"/> 
 
    </div> 
 
</div>

ので.videoを垂直方向に中央揃えされていますが、それを見ることができません！コンテンツ（.video）よりも大きい#frameに高さを追加すると、.videoも垂直方向の中央に表示されます。これを試してみてください

body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 
#frame { 
 
    border:1px dotted red; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height:200px; 
 
} 
 
.video { 
 
    border:1px dotted blue; 
 
    line-height:0; 
 
    width: 80%; 
 
}

<div id="frame"> 
 
    <div class="video"> 
 
    <img src="https://placehold.it/100x75"/> 
 
    </div> 
 
</div>

Answer 2

：

.videoからwidthを外し、flex:0 autoとalign-self:center

body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
#frame { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.video { 
 
    flex:0 auto; 
 
    /* width: 100%; */ 
 
    align-self:center; 
 
}

<div id="frame"> 
 
    <div class="video"> 
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?ecver=1" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div>

を追加し、次の例を参照してください。 iframe内に

Answer 3

以下のコードを追加し

padding-top:50%; in css 

https://jsfiddle.net/anandnaha/km83v9rv/

Answer 4

のハードコーディングの幅と高さは良い習慣ではありません。

私はこれがうまくいきたいと思います。

body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.video { 
 
    width: 80%; 
 
} 
 

 
iframe { 
 
    height: 100vh; 
 
    width: 100vw; 
 
}

<div id="frame"> 
 
    <div class="video"> 
 
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?ecver=1" frameborder="0"></iframe> 
 
    </div> 
 
</div>