html - 高さ100%の別の要素の内側に要素を垂直方向に中央揃えする方法は?

Question

私はこのテクニックhttp://codepen.io/chriscoyier/pen/gsodIを使用していました。ほとんど問題ありませんが、2 番目のボックスでは、コンテンツ ボックスが外側の要素からはみ出していることがわかります。

内側の要素が外側の要素よりも小さい場合は中央に配置され、大きい場合はこの画像のように外側の要素を「押す」ように修正するにはどうすればよいですか?

Answer 1

垂直方向に整列するには、3 つの主要なプロパティを指定する必要があります

• 身長 ： ...;
• 表示: テーブルセル;
• 垂直整列: 中央;

Answer 2

これはあなたが説明しているようです。(デモの 2 番目の例)

この追加を修正するdisplay:table;にwidth: 100%は、ブロック (親) 要素に

更新されたフィドル

マークアップ

<div class="block">    
    <div class="centered">
    </div>   
</div>

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
   background: orange;
   display: table; /* added this */
   width: 100%;  /* added this */
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

ブロック要素がビューポートの高さの 100% を占める例を見たい場合は、これを見てください: before ... after

Answer 3

あなたのCSSで

vertical-align:middle