CSS を使用して要素の垂直方向の中央揃えを実現するいくつかの方法についての簡単な説明

#CSS を使用して要素を水平方向に中央揃えにします。行レベルの要素は親要素のテキスト配置の中心を設定し、ブロックレベルの要素は親要素のテキスト配置の中心を設定します。右マージンを自動に設定するだけです。この記事では、CSSを使用して要素を縦方向に中央揃えにする6つの方法をまとめましたので、見てみましょう。

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

ここにテキスト

#css

#child { 行の高さ: 200px; }

#html

##

#css

CSS テーブル メソッド

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

コード:

html

ここにコンテンツcss

<pre class="brush:php;toolbar:false">#親 {表示: テーブル;}
＃子供 {
表示: テーブルセル;
垂直方向の配置: 中央;
}

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

#child {
表示: インラインブロック;
}

絶対位置決めと負のマージン

コード：

html

ここにコンテンツ

#parent {位置: 相対;} ＃子供 { 位置: 絶対; トップ: 50%; 左: 50%。 高さ: 30%; 幅: 50%; マージン: -15% 0 0 -25%; }

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

ここにコンテンツ#css

上下のパディングを均等にする

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

コード:

html

ここにコンテンツcss

＃＃＃＃親 {
パディング: 5% 0;
}
＃子供 {
パディング: 10% 0;
}<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">