メインコンテンツへ移動
黯羽軽揚毎日少しずつ

CSS 上下左右中央揃え

無料2017-07-30#Solution#CSS#css绝对居中#css水平竖直居中#css水平垂直居中#垂直居中#IE7居中

2 つの興味深い中央揃え方案

はじめに

transform、flex が登場した後、水平垂直中央揃えはすでに容易になりました。例えば万能な：

position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
/* 1.コンテンツ左上を中央揃え */
top: 50%; left: 50%;
/* 2.負の半分の幅と高さでコンテンツを元に戻す */
-webkit-transform: translate(-50%, -50%);

鍵は transform のパーセンテージが自身の幅と高さに対して計算される特性を利用することです。もし環境が transform をサポートしていない場合、いくつかの古いが非常に巧妙なテクニックを使用する必要があります

margin 中央揃え

特徴が明確な方法：

position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
/* 1.自身のコンテンツを包含ブロックに対して中央揃え */
margin: auto;
/* 2.自身の幅と高さの計算方法を指定 */
width: 100px; height: 100px;

原理

鍵は margin の計算規則を利用することです：

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含ブロックの幅

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含ブロックの高さ

（出典 10.3.7 絶対位置指定の置換不可能な要素、10.6.4 絶対位置指定の置換不可能な要素）

margin 中央揃えは、上記の方程式に制限条件を追加することです：

margin-top === margin-bottom && margin-left === margin-right

これは margin で中央揃えを実現する核心です

CSS の 2 つのステップの実際の意味は以下の通りです：

  1. margin の計算方法を指定し、他の必要な値が計算可能な場合、auto は margin が残りのスペースを均等に分けることを要求します

  2. 必要な値の計算方法を指定します

ここでの「必要な値」は分けて考える必要があります。水平方向は left, right, width です。以下の規則があるためです：

もし'left'、'width'、'right' がすべて'auto'なら……

もしこの 3 つの値がすべて'auto'でないなら……

それ以外の場合、'auto'の値を持つ'margin-left'と'margin-right'を 0 に設定し、以下の 6 つの規則から適切な 1 つを選択して適用します

5.'width'が'auto'で、'left'と'right'が'auto'でない場合、'width'を求めます

つまり、もし

left: 0;
right: 0;
width: auto;

なら

margin-left: auto;
margin-right: auto;

の実際の効果は

left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
width: auto;

となります

margin auto が無効になります（0 にリセットされます）。そのため width は必要な値であり、その計算方法を指定する必要があります。例えば数値、パーセンテージ、または制限条件（max-width など）です

垂直方向は top, bottom, height で、対応する規則は水平方向と類似しています：

5.'height'が'auto'で、'top'と'bottom'が'auto'でない場合、'auto'の値を持つ'margin-top'と'margin-bottom'を 0 に設定し、'height'を求めます

したがって height も必要な値です

このように見ると、最も目立つ tblr 全 0 は重点ではなく、width, height と同様に、margin auto を計算可能にするための必要な値に過ぎません。したがって、このように並べるべきです：

position: absolute;
/* 1.自身のコンテンツを包含ブロックに対して中央揃え */
margin: auto;
/* 2.margin auto の計算に必要な値を指定 */
top: 0; bottom: 0; left: 0; right: 0;
width: 100px; height: 100px;

さらに、tblr 全 0 は明らかに不要です：

top: 30px; bottom: 30px; left: 50px; right: 50px;

も可能です。さらに進んで、tblr を使用して上下（左右）の padding, border-width の差を相殺することもできます

長所と短所

短所：

  • 高さが不定のコンテンツに対応できない（height が auto でなければならない場合）

  • WP 下では無効（無視できると仮定）

長所：

  • [IE8+] に対応

  • resize をサポート（ユーザーがコンテンツの右下をドラッグしても中央揃えを維持）

inline 中央揃え

非常に巧妙な方法：

.center-inline-container {
    /* 1.コンテンツ水平中央揃え */
    text-align: center;
}
.center-inline-container:before {
    /* 幅 0 のスペース */
    content: '\200B';
    display: inline-block;
    /* 2.コンテンツの高さを撑える */
    height: 100%;
    vertical-align: middle;
}
.center-inline-content {
    display: inline-block;
    /* 3.垂直中央揃え */
    vertical-align: middle;
}

原理

鍵は vertical-align: middle; を利用して垂直中央揃えを実現することです：

このボックスの垂直中点を、親ボックスのベースラインに親の半 x-height を加えた位置に揃えます

つまり：

コンテンツの縦方向の中点位置 = 親ボックスのベースライン位置 + 親の半 x-height の高さ

まず親ボックスのベースライン位置を確定します：

'inline-block'（ボックス）のベースラインは、その最後の通常フロー内の行ボックスのベースラインです。ただし、フロー内行ボックスがない場合、または'overflow'属性の計算値が'visible'でない場合は除きます。この場合、ベースラインは bottom margin エッジです

「最後の通常フロー内の行ボックスのベースライン」を続ける必要があります：

同じ行からのボックスを含む矩形領域を行ボックスと呼びます

CSS 2.1 は行ボックスのベースラインの位置を定義していません

問題に遭遇しました。仕様は行ボックスのベースラインがどの位置にあるかを述べていませんが、制限条件を提供しています：

インラインレベルボックスは、その'vertical-align'属性に従って垂直に整列されます。'top'または'bottom'揃えの場合、行ボックスの高さが最小化されるように整列する必要があります

これらの間接的な制限を満たした後、行ボックスのベースライン位置を確定します。行ボックスのベースライン位置の影響力のある要因は以下の通りです：

  • 行ボックス内のインラインレベルボックスの vertical-align、height、line-height

  • 行ボックスが所在するコンテナの line-height

  • その他（他にもあるかもしれません）

異なるケースでは行ボックスのベースライン位置が異なる可能性がありますが、最終的なベースラインの位置を簡単にマークできます：

Just add a character at the beginning of the line in questions

一般的に小さなアルファベット x を追加し、x の底部に密着している位置がベースラインです

次に「親の半 x-height の高さ」を確定します。これは比較的容易です：

ex：関連フォントの'x-height'

'ex'単位は要素の最初の利用可能なフォントに基づいて定義されます。例外は'ex'が'font-size'属性の値に現れる場合で、この場合親要素の'ex'を参照します

'x-height'と呼ばれるのは、通常小文字"x"の高さに等しいためです。しかし、"x"を含まないフォントでも'ex'が定義されています

フォントの x-height はいくつかの異なる方法で得ることができます。一部のフォントは x-height に関する信頼できる仕様を含みます。信頼できるフォント仕様が入手できない場合、UA は小文字の字形の高さに基づいて x-height を決定できます。一つの可能性のあるヒントは、小文字"o"の字形がベースラインの下にどれだけ伸びているかを見て、そのバウンディングボックスの top 値を引くことです。x-height を決定することが不可能または非現実的な場合、0.5em を使用するべきです

つまり：

x-height = 現在のフォントの x-height || 小文字の字形の高さに基づいて x-height を決定 || 0.5em

したがって「半 x-height の高さ」（0.5ex）は約0.25emです

CSS の 3 つのステップを再看します：

  1. 水平中央揃えは問題ではありません

  2. 擬似要素が行ボックスの高さをコンテナいっぱいに撑え、vertical-align: middle; と協力して行ボックスのベースライン位置をコンテナの中心付近に引き下げます

  3. コンテンツの中心点が行ボックスのベースラインから上方0.5exの位置に揃えます

ここまではっきりしています。垂直方向は実際に中央揃えになっていません：

  • 行ボックスのベースラインはコンテナの中心と等しくありません

  • 行ボックスのベースラインから上方0.5exの位置もコンテナの中心と等しくありません

最終的に 2 つの中心は一致せず、したがってこの方式で実現する中央揃えには欠陥があり、ピクセルレベルの差異が存在します。下図の通りです：

[caption id="attachment_1456" align="alignnone" width="900"]css-center-inline css-center-inline[/caption]

margin-top を使用して修正することを試みることができますが、行ボックスのベースラインには確定された計算方法がないため、完璧な修正はできません。Demo から見ると、0.25ex が最も適切に見えます。実際の適用では微調整が必要かもしれません（ピクセルレベルの欠陥が気になる場合）

長所と短所

短所：

  • ピクセルレベルの欠陥が存在し、解決できず、完璧な垂直中央揃えではありません

  • HTML の空白文字がスペースを占有する問題が存在し（HTML を圧縮、またはコンテナ font-size: 0、コンテンツで font-size をリセット）、水平中央揃えに影響します

  • 追加の要素/擬似要素が必要です

長所：

  • [IE8+] に対応

  • 高さが不定のコンテンツをサポート

オンライン Demo

Demo アドレス：http://ayqy.net/temp/css-center.html

P.S. スタイル、構造及び注意事項はすべてソースコードにあります

参考資料

コメント

コメントはまだありません

コメントを書く