divを垂直方向の中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose

2 つの div があります:

div1 のサイズは動的です。 div2をdiv1の中で縦方向中央に配置したいのですが
CSSでどう書くか？


ディスカッションへの返信(解決策)

line-height と height の値を同じに設定するだけです

line-height と height の値を同じに設定するだけです

div1 の line-height を設定しますか?

#div1{ display:table-cell;vertical-align:middle;}

 #div1 {            border-top:1px solid;            border-bottom:1px solid;            color:transparent;            /**/            background-color:#eee;                                       }        #div2 {            background-color:#ccc;            color:#000;            margin-top:10px;            margin-bottom:10px;        }

セルをシミュレートするのも良いアイデアです。

動的、js を使用する必要があり、単純な CSS ではそれを実現できません

#div1{ display:table-cell;vertical-align:middle;}

これは実行可能ですが、display:table-cell を使用した後、

マージンが左に移動しません

解決方法を教えてください

#div1{ display:table-cell;vertical-align:middle;}

これは機能しますが、display:table-cell を使用した後

左側のマージンが機能しません

解決方法を教えてください

絶対位置固定を使用してみました
しかし、表示の効果: table-cell が消えました

js を使ってみましょう

#div1{ display:table-cell;vertical-align:middle;}

これは動きますが、display:table-cell を使用した後

左側のマージンが機能しません

解決方法を教えてください
DIV が配置されています。外側のレイヤーで間隔を制御します

<style>      #div1{ display:table-cell;vertical-align:middle;}      .inner{ margin:10px;}</style><div class="inner"><div id="div1">  <div id="div2">  </div></div></div>

#div1{ display:table-cell;vertical-align:middle;}

これは機能しますが、display:table-cell

を使用した後、左側のマージンが機能しなくなりました
解決方法を教えてください
A DIVは外層に配置して間隔を制御しています


嗲
エフェクトは動作しています
それについても議論したいです
作るために このエフェクトに複数のdivを使用すると面倒になりますか？こんな感じですが、divにパディングを追加するだけで十分ではないでしょうか？ VI DIV2 の CSS を設定します
#DIV2 {
width: *** px;
Margin: 0 Auto;

わかりました、 を使用してみてはいかがでしょうか?

これだけの場合は、div にパディングを追加するだけで十分ではないでしょうか。

html5では削除されています

CSSだけで縦方向のセンタリングを制御するのは非常に難しい と書いてみましたが、効果が良くありません。複数のブラウザと互換性があるため、JS で記述することをお勧めします

CSS の高さが不明な div の垂直方向のセンタリングの問題

この問題に遭遇しました。これは上記の方法で解決できます。

そうですね、私は初心者なのでよくわかりません。 を使用してみてはいかがでしょうか。

IE core ブラウザのみがサポートしているようで、Firefox はこの書き方をサポートしていません。

そうですね、私は初心者なのでよくわかりません。

を使用してみてはいかがでしょうか。

IE core ブラウザのみがサポートしているようで、Firefox はこの書き方をサポートしていません。

実際、私はテストのためにChromeを使用しており、センターは問題ありませんが、HTML5のマニュアルを確認したところ、削除する必要があることが判明したため、別の方法を見つける必要があります。 。 。

div1 にvertical-align:middle を追加します