2014 年時点で一般的に使用されているテクノロジー:

• アプローチ 1 - transform translateX/translateY:

  ここに例を示します / 全画面例

  サポートされているブラウザ (ほとんどのブラウザ) では、top: 50%/left: 50% を translateX( -50%) translationY(-50%) は、要素を動的に垂直方向/水平方向の中央に配置します。 リーリー

• 方法 2 - フレックスボックス方法:

  ここに例を示します / 全画面例

  サポートされているブラウザ

  では、ターゲット要素の display を flex に設定し、垂直方向の中央揃えに align-items:center を使用します。水平方向の中央揃えには justify-content: center を使用します。追加のブラウザ サポートのためにベンダー プレフィックスを追加することを忘れないでください (例を参照 )。 リーリー

table-cell
• /

  vertical-align: middle:

  ここに例を示します

  / 全画面例 場合によっては、html

  /

  body 要素の高さが 100%. に設定されていることを確認する必要があります。 垂直方向の配置の場合、親要素の width

  /

  height を 100% に設定し、display: table を追加します。子要素で、display を table-cell に変更し、vertical-align: middle. を追加します。 水平方向の中央揃えの場合は、text-align: center

  を追加してテキストと他の

  inline 子要素を中央揃えにするか、margin: 0 を使用します。 auto 要素が block level. であると仮定します。 リーリー

を使用して上から
• 50%

  に絶対配置します。

  ここに例を示します

  / 全画面例 このアプローチでは、テキストの高さが既知であることを前提としています (この例では 18px

  )。親要素を基準にして、要素を上から

  50% に絶対的に配置するだけです。要素の既知の高さの半分である負の margin-top 値 (この場合は -9px.) リーリー

line-height
• 方法 (柔軟性が最も低く、推奨されていません):
  例はこちら

  場合によっては、親要素の高さが固定されています。垂直方向の中央揃えの場合は、子要素の line-height

  値を親の固定高さと同じに設定するだけです。要素。＃＃＃

  この解決策は場合によっては機能しますが、次のように複数行のテキストがある場合には機能しないことに注意してください。 リーリー

一行のテキストや画像であれば、簡単に実行できます。次のように使用してください:

http://pmob.co.uk/ に解決策があります。 「垂直配置」を探してください。

これは、現在のすべての主要ブラウザで広くサポートされています。基本的に、コンテナはフレックス コンテナとして指定され、その主軸と水平軸に沿って中心に配置される必要があります。 リーリー 「フレックス項目」と呼ばれる子項目の固定幅を指定します:

例:

コンテンツをシュリンクラップするには、さらに簡単です。flex アイテムから

行を削除するだけです。自動的にシュリンクラップされます。 例:

上記の例は、MS Edge や Internet Explorer 11 などの主要なブラウザでテストされています。

カスタマイズする必要がある場合の技術的な注意点: フレックス項目の内部では、このフレックス項目自体はフレックス コンテナーではないため、CSS の古い非フレックスボックス方式は期待どおりに機能します。ただし、フレックス項目を追加すると、 item を現在のフレックス コンテナに追加すると、2 つのフレックス アイテムは水平に配置されます。それらを垂直に配置するには、

をフレックス コンテナに追加します。これがフレックス コンテナ間でどのように機能するかです。およびその immediate 子要素。 センタリングを行う別の方法があります。フレックス コンテナの主軸と交差軸の分布に

を指定せず、代わりに margin: auto を指定します。フレックス アイテムが 4 方向すべての余分なスペースを占めるようにし、マージンが均等に分散されているため、フレックス アイテムが全方向の中央に配置されます。これは、フレックス アイテムが複数ある場合を除いて機能します。また、この手法は MS Edge では機能しますが、MS Edge では機能しません。 Internet Explorer 11.

これは、

を使用してより一般的に実行でき、Internet Explorer 10 や Internet Explorer 11 などの古いブラウザでもうまく動作します。複数行のテキストをサポートできます: リーリー 例:

シュリンクラップ幅:

上記のソリューションでは、コンテンツ領域に固定幅を使用します。シュリンクラップ幅を使用するには、

例:

Internet Explorer 10 のサポートが必要な場合、フレックスボックスは機能せず、上記のメソッドと

メソッドが機能します。それ以外の場合は、フレックスボックスで機能します。