CSS を垂直方向に中央揃えにする 6 つの方法_html/css_WEB-ITnose

からの再投稿

CSS を使用して要素を水平方向に中央揃えにするのは比較的簡単です。行レベルの要素は親要素のテキスト配置の中央を設定し、ブロックレベルの要素は独自の左右のマージンを自動に設定します。この記事では、CSS を使用して要素を垂直方向に中央揃えにする 6 つの方法をまとめています。それぞれの方法は、実際の使用プロセスで特定の方法を選択するだけです。

Line-Height メソッド

トライアル: 単一行テキストを垂直方向に中央揃え、デモ

コード:

html

css

#child { line-height: 200px; } ログイン後にコピー

画像を垂直中央に配置するコードは次のとおりです

html

css

<div id="parent"> <img src="image.png" alt="" /> </div> ログイン後にコピー

CSS テーブルメソッド

適用可能: ユニバーサル、デモ

コード:

html

りー

りーcss

下位バージョンの IE 修正バグ:

絶対位置決めとマイナスマージン

適用対象: ブロック レベル要素、デモ

コード:

html

css

rree

rree 絶対位置決めとストレッチ

適用可能: ユニバーサル、ただし IE バージョンが 7 より低い場合は正しく動作しません、デモ

コード:

html

れーい css

上下のパディングを均等にする 適用対象: 一般、デモ

コード:

html

あーるー

あーる

css

あーる

Floater Div 適用可能: ユニバーサル、デモ コード:

html

rree

rree

css

上記は実際に使用する際に合理的に選択できる 6 つの方法です。 「垂直センタリング」の記事を参照してください。