オフセンターにアクセスできない垂直方向の中央の要素

Question

要素の中央にページを配置しようとしています。私はちょうどそれを中心に置くことができますが、ビューの高さが中心の要素よりも小さくなるまでページを垂直にサイズ変更すると、要素はスクロールバーなしで垂直方向にオフスクリーンになります。あなたはここでの問題のデモを見ることができます：

http://codepen.io/mse/pen/BWayXV

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.inner { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 800px; 
 
    background: grey; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

私はフレキシボックスを含む垂直センタリングの他の方法、のカップルしようとしたことを言及すべきである、と私は」それでも同じ問題が発生しています。この垂直センタリングの方法でこの問題を解決する方法はありますか、または少なくともこの問題がない垂直センタリング方法はありますか？

Answer 1

これは、あなたの内側の要素のサイズを制限しようとすることができます

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100vh; 
 
} 
 
.outer { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.inner { 
 
    width: 400px; 
 
    height: 800px; 
 
    background: grey; 
 
}

<div class="outer"> 
 
     <div class="inner"></div> 
 
</div>

Answer 2

を動作するはずです。サイズを固定のpx量で定義すると、画面がそのpx量より小さくなるとすぐにスクロールが開始されます。内部要素の高さを変更しても問題がなければ、vhを使用するか、@mediaクエリを実装して、より小さい画面でサイズを小さくすることができます。ここで＃sの例：

.inner { height: 100vh; /* 100 view height percentage*/} 

注：ビューポートのパーセンテージ長は初期包含ブロックのサイズに対してビューポート上のスクロールバーの存在によって影響されます。

Answer 3

この

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 
.inner { 
 
    background: #ccc; 
 
    width: 400px; 
 
    height: 600px 
 
}

<div class="outer"> 
 
    <div class="inner"> I'm a block-level element centered vertically within my parent.</div> 
 
</div>

詳細情報試してみてください：https://css-tricks.com/centering-css-complete-guide/

CSS VHセンタージェネレータ：http://howtocenterincss.com/