css - 最小高さのみを持つ親の中心 div、および子は高さなしで相対位置を持つ場合があります

Question

したがって、min-height 100% の div があります。(画面の 100% 以上)。子はコンテンツを保持し、垂直方向の中央に配置する必要がありますが、親をそのサイズの 100% 以上に拡張する可能性があります。この子は身長が可変です。

css(3) だけでこれを行う方法はありますか?

score 1 · Accepted Answer

display: table;プロパティとプロパティを使用しdisplay: table-cell;ます。

display: table;外側の DIV には、と内側のDIVdisplay: table-cell;が必要vertical-align: middle;です。のデフォルト表示を模倣しますtd。

CSS

.parent {
  min-height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; 
}

HTML

<div class="parent">
     <div class="child">child</div>
</div>

この質問はよく聞かれます。SO または Google で簡単に検索すると、多くの結果が得られます。

1 に答える 1