CSSの完璧な垂直中央配置を実現する11の方法
私はフロントエンドの白、小さなプログラム開発プロジェクトを行っている、頭が大きくなるようにCSSのスタイル調整。私は正常に私の問題を解決している記事で、いくつかの垂直方向のセンタリングCSSスタイルの設定を試してみましたので、私はバックアップにそれを再現しています。
CSSで縦方向の中央揃えを実現する方法は、以下の11通りです。
1. 絶対位置とネガティブマージンを利用したブロックレベル要素の垂直方向へのセンタリング
html コードです。
<div id="box">
<div id="child">I am testing DIV</div>
</div></pre>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute; top: 50%;
margin: -50px 0 0 0 0;
line-height: 100px;
}
実行結果は以下の通りです。
この方法は互換性がありますが、小さな欠点があります。それは、中央に配置されるブロック-レベル要素のサイズをあらかじめ知っておかなければ、垂直方向に正確に中央配置されないということです。
2. 絶対位置とトランスフォームを使用する
html コードです。
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
実行結果は以下の通りです。
この方法の非常に明白な利点は、transform の translate offset の割合が要素自体のサイズに対する相対値であるため、センタリングする要素のサイズを事前に知っておく必要がないことです。
3. 絶対位置とネガティブマージンを使って垂直方向にセンタリングするもう一つの方法
htmlのコードです。
<div id="box">
<div id="child"> I'm also a test DIV</div>
</div></pre>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 50%;
height: 30%;
background: pink;
position: absolute;
top: 50%;
margin: -15% 0 0 0 0;
}
実行結果は以下の通りです。
この方法の原理は、基本的に最初の2つと同じである。追加ポイントは、マージンをパーセンテージで指定することもできる点です。この場合、値は親要素を基準とした要素のサイズの割合を指定し、実際の使用シナリオに応じて特定の値を使用するかパーセンテージを使用するかを決定することができます。
4. 絶対位置とmargin: autoの組み合わせ
htmlのコードです。
<div id="box">
<div id="child"> Nerd retired today (. barb.) </div>
</div></pre>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 200px;
height: 100px;
background: #A1CCFE;
position: absolute; top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
実行結果は以下の通りです。
この実装の2つの核は、垂直方向にセンタリングされる要素が親要素に対して絶対的に位置決めされること、トップとボトムが等しい値に設定されること、ここでは0に設定していますが、もちろん99999pxでも-99999pxでも、等しければ何でも構いません、ただこのステップを行ってからセンタリングされる要素のマージンを自動に設定してください、そうするとこれは要素を垂直方向にセンタリングすることになります。
中央に配置する要素の幅と高さは省略することもできますが、その場合は画像のような独自の寸法を持つ要素でなければうまくいきません。
5. パディングを用いた子要素の垂直方向へのセンタリング
htmlのコードです。
<div id="box">
<div id="child"> The haze in Xi'an today is seriously scary, just took a look at the PM2.5 is 422</div>
</div>
css code.
#box {
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: #F7A750;
line-height: 50px;
}
実行結果は以下の通りです。
これは非常に単純なことで、親要素の上下のマージンを等しく設定すれば、子要素は当然ながら垂直方向に中央寄せされますが、当然ながら親要素は高さを設定できず、自動的に埋めなければならず、上マージン+子要素の高さ+下マージンに正確に等しい値を設定しないと、正確に垂直方向に中央寄せすることはできないのです。
この方法は専門的ではないと思われるかもしれませんが、実際にはいくつかのシナリオで非常にうまく機能します。
6. サードパーティーのベンチマークを設定する
html コードです。
<div id="box">
<div id="base"></div>
<div id="child"> Wrote my first blog today, hope I can stick to it!
</div>
</div>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6);
line-height: 50px;
margin-top: -50px;
}
実行結果は以下の通りです。
これも非常に簡単で、まずサードパーティ製のベース要素に親要素の高さの半分に相当する高さを設定し、ベース要素のボトムマージンが当然親要素の垂直方向の中間線になるようにし、次に要素の垂直方向の中央になるようにマージントップを設定し、その値は自身の高さの半分で、マイナス側を取ります。
7. フレックスレイアウトの利用
htmlのコードです。
<div id="box">Foggy weather, too long without a game</div>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
実行結果は以下の通りです。
ブロックレベル要素にも同じアプローチが適用されます。
htmlのコードです。
<div id="box">
<div id="child"> How can programmers protect their eyes? </div>
</div>
css code.
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
#child {
width: 300px;
height: 100px;
background: #8194AA;
line-height: 100px;
}
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
html plus css style to achieve js food project home page サンプルコード
-
HTML DOMのsetIntervalとclearIntervalのメソッドのケーススタディ
-
CSSカスタムスクロールバースタイルの事例詳細
-
CSS による div コンテンツの垂直中央揃え ケースサマリー
-
過度なアニメーションやジョギング効果を利用したCSS3 ケーススタディ
-
CSS開発における20のクイックTIPSを解説
-
HTTPベースのブラウザキャッシュ機構の網羅的解析
-
CSSの失敗術を解説
-
ポジションプロパティで進めるcssの簡単な説明
-
css list タグリストと table タグテーブルの説明