web-dev-qa-db-ja.com

定義された幅/高さでdivのコンテンツの中心に垂直に整列する方法は？

定義された幅/高さdivのコンテンツを垂直方向に中央揃えする正しい方法は何でしょうか。

example には、高さが異なる2つのコンテンツがあります。両方ともクラス.contentを使用して、垂直方向に中央揃えする最善の方法は何ですか。 （そして、すべてのブラウザで機能し、table-cellの解決なしで）

いくつかの解決策を念頭に置いていますが、他のアイデアを知りたい場合は、position:absolute; top:0; bottom: 0;とmargin autoを使用します。

htmlcssvertical-alignment
76
Ricardo Rodrigues

私はこれを少し研究しましたが、私が発見したことからあなたには4つの選択肢があります：

バージョン1：テーブルセルとして表示される親div

親divでdisplay:table-cellを使用しても構わない場合は、次のオプションを使用できます。

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

ライブデモ

バージョン2：表示ブロックとコンテンツ表示テーブルセルを持つ親div

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

ライブデモ

バージョン3：表示テーブルセルとしての親divフローティングとコンテンツdiv

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

ライブデモ

バージョン4：コンテンツ位置が絶対の親div位置

このバージョンでの唯一の問題は、特定の実装ごとにcssを作成する必要があるように見えることです。この理由は、コンテンツdivがテキストを塗りつぶす高さを設定する必要があり、マージン上部がそこから計算されるためです。この問題はデモで確認できます。コンテンツdivの高さ％を変更し、-。5を掛けてマージントップ値を取得することにより、すべてのシナリオで手動で機能させることができます。

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

ライブデモ

119
Josh Mein

これは、数行のコードでdisplay: flexを使用して行うこともできます。以下に例を示します。

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

ライブデモ

30
martin36

私はこれでこの解決策を見つけました 記事

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

要素の高さが固定されていなければ、魔法のように機能します。

27
N Kumar