定義された幅/高さのdivのコンテンツの中央に垂直に配置する方法は？

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

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

心にいくつかのソリューションを持っていますが、1が使用され、他のアイデアを知っていただきたいと思いますposition:absolute; top:0; bottom: 0;とmargin auto。

私はこれを少し調査しましたが、私が見つけたものから、あなたには4つの選択肢があります：

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

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

.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;
}​

ライブデモ

これはdisplay: flex、数行のコードで実行することもできます。次に例を示します。

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

ライブデモ

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

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

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

要素の高さが固定されていない場合、チャームのように機能します。

マージン：all_four_margin

all_four_marginに50％を提供することにより、要素を中央に配置します

style="margin: 50%"

あなたもフォローに適用できます

マージン：右上、左下

マージン：右上と左下

マージン：上＆下右＆左

適切な％を与えることで、どこにでも要素を取得できます。