中央のdivが上に切れていますか？ここ

Question

は、私が働いているページです：http://en08-phx.stablehost.com/~news/test.html

これは私がdivの中央に使っているコードです：私は私のブラウザの幅を減少させたり、携帯電話を使用するたびに

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 70%; 
    height: auto; 
    padding: 20px; 
    background-color:rgba(255, 255, 255, 0.2); 
    color: white; 
    text-align: center; 
    border-radius:5px; 
    border:2px solid rgba(255, 255, 255, 0.5); 
} 

を、ページの上部が途切れるようになります。

ブラウザの幅のサイズに関係なく、divを中央揃えにします。ただし、ブラウザの高さが小さすぎる場合は、上/下に10ピクセルの余白を追加して、すべてのテキストが表示されるようにしてください。

私は正確にここで間違っていますか？

Answer 1

このポジショニング手法の問題点（上位50％マイナスtranslateY-50％）は、それ自身の高さに基づいて調整されることです。ビューポートがビューポートよりも背を高くすると、頂点と底面が途切れて中央に残ります。あなたがフレックスボックスを使用できるのなら、フレックスボックス（http://caniuse.com/#search=flex）をお勧めします。

ラップしたいコンテナは常に、このような中心のラッパーとして別の容器に集中し、それを中央にフレキシボックスを適用：

.centered-wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    min-height: 100%; 
} 

分の高さは、ここでは非常に重要です。あなたのdivがページの高さまで伸びない場合、divを塗りつぶして中央に配置します。そうであれば、それだけであなたが持っているシナリオを避けて拡大し続けるでしょう。あなたはボックスがページ全体に高さが相対的であるなら、あなたは仕事に、このために、あなたのページの高さを設定することも必要があります：

html, 
body { 
    height: 100%; 
} 

あなたがいずれかがあなたの中心のdivに行ってセンタリング必要はありません。 、ビジュアルスタイル。これは私のために働いていhttps://jsfiddle.net/vfc9n7p2/

Answer 2

body { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    } 
    div { 
/* position: absolute; */ 
/* left: 50%; */ 
/* top: 50%; */ 
/* transform: translate(-50%, -50%); */ 
    width: 70%; 
    height: auto; 
    padding: 20px; 
    background-color: rgba(255, 255, 255, 0.2); 
    color: white; 
    text-align: center; 
    border-radius: 5px; 
    border: 2px solid rgba(255, 255, 255, 0.5); 
    margin: 0 auto; 
    } 

これは正常に動作します。

Answer 3

<br clear="all"> 

：

は、ここでのアクションで、それのサンプルです。 divのようなコンテンツ要素の前に置いてください。