CSS 垂直中央揃えガイド_html/css_WEB-ITnose

CSS における垂直方向のセンタリングの問題を大まかに整理してみましょう

大きく分けて 2 つのカテゴリに分かれます

1 ブロック要素のサイズを知るということは、一般に要素の高さを知ることを意味します。

方法 1: 最も単純で、類似レベルが中心になります。 素 考え方: サブ要素は絶対値に設定されます; 上端は 0 に設定されます; これは OK です。

考え方: 絶対的な位置決めも同様であり、負のマージンを理解することが重要です。負のマージンについて少し説明します。マージンを負の値に設定すると、HTML にマップされると要素の実際の高さが短くなり、通常は上に引っ張られるか (margin-top2 が負の場合)、他の要素が上に引っ張られます。 margin-bottom は負です)。具体的なものについては、このブログを参照してください http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

具: 子要素の高さがわからない場合:翻訳 (-50 %); とても賢いですね! ！ ！

<div class="lev1">我是第一层        <div class="lev2">我是第二层        </div>    </div>/*CSS*/       .lev1{            width:200px;            height:200px;            background-color: #008BCD;            border: 1px solid #1874CD;            position: relative;        }        .lev2{            background-color: #C078CD;            border: 1px solid #B800CD;            width:100px;            height:100px;            position: absolute;            top: 0;            bottom: 0;            margin:auto;        }

方法 3: 追加のサブ div を追加し、その高さを 50% に設定し、その margin-bottom:-height/2 を設定します。これは、この高さだけコンテンツを引き上げるサブ div と同等です。

アイデア: マイナスのマージンが鍵であることを理解する。ポイント floater (float) に設定する属性 なぜ float を設定してクリアする必要があるのでしょうか。高さを 50% に設定するのは親要素を基準にしています。margin-top: -height/2 は子要素をプルするのと同じです。ここまで)

<div class="lev3  lev">我是第一层    <div class="lev4">我是第(absolute margin:-height/2;top:50%)    </div></div>/css/ .lev3{            width:200px;            height:200px;            background-color: #008BCD;            border: 1px solid #1874CD;            position: relative;        }        .lev4{            background-color: #C078CD;            border: 1px solid #B800CD;            width:100px;            height:100px;            position: absolute;            top: 50%;            margin-top: -50px;        }

方法 4: 親要素を table に設定し、子要素を table-cellvertical-alight:middle; に設定します。

アイデア: レイアウト属性を変更できるという利点があります。高さ不明。ところで、vertical-align 属性を詳しく見てみましょう。最も単純な属性は com/wordpress/2010/05/% にのみ有効であることに注意してください。 E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8 %A7%A3%E4%B8% 8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

<div id="parent"><div id="floater"></div><div id="child">Content here</div></div>/*CSS*/#parent {height: 250px;}#floater {float: left;height: 50%;width: 100%;margin-bottom: -50px;}#child {clear: both;height: 100px;}

方法 5: ブラックテクノロジーもカウントし、ゴースト要素を使用して拡張します

具体的な方法:

div id="parent"><div id="child">Content here</div></div>/*CSS/#parent {display: table;}#child {display: table-cell;vertical-align: middle;}

もちろん、非常に単純な Flex レイアウトや、padding: 10p 0; など、最後には言及されていないものがいくつかあります。