110

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

この例では、高さの異なる 2 つのコンテンツがあり、 class を使用して両方を垂直方向に中央揃えする最良の方法は何ですか.content? （そして、それはすべてのブラウザで動作し、の解決策はありませんtable-cell）

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

4

6 に答える 6

140

私はこれを少し調査しました、そして私が見つけたものからあなたには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;
}​

ライブデモ

于 2012-06-10T12:40:34.647 に答える
34

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

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

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

要素の高さが固定されていない場合、それは魅力のように機能します。

于 2016-06-26T21:40:24.620 に答える
-8

マージン: all_four_margin

all_four_margin に 50% を指定すると、要素が中央に配置されます

style="margin: 50%"

あなたもそれをフォローするためにそれを適用することができます

margin: 右上、左下

margin: 右上&左下

マージン: 上下左右

適切な % を指定することで、必要な場所に要素を取得します。

于 2014-05-29T18:34:23.087 に答える