Web ページ上で HTML 要素を中央に配置するのは簡単なことのように思えるかもしれませんが、複雑なレイアウトによって一部のソリューションがうまく機能しないことがよくあります。
Web ページのレイアウトでは、要素を垂直方向に中央揃えするよりも水平方向に中央揃えにする方がはるかに簡単です。多くの場合、水平方向の中央揃えと垂直方向の中央揃えを同時に実現するのが最も困難です。現在、レスポンシブデザインの時代では、要素の正確な高さと幅を知ることが難しいため、一部のソリューションは適切ではありません。私の知る限り、CSS で中央揃えを実現するには少なくとも 6 つの方法があります。次の HTML 構造を使用して、単純なものから複雑なものまで始めます。
にパディングを追加するか、コンテンツに margin-top と margin-bottom を追加して、コンテナとコンテンツの間に一定の距離を作成する必要があります。
マージンを使用: 中央に自動
この水平方向の中央揃えの方法には、上記の text-align を使用する方法と同じ制限があります。
div.center { background: hsl(60, 100%, 97%);}div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}ログイン後にコピー
注: img 要素で margin: 0 auto を有効にするには、display: block を使用する必要があります。
table-cell を使用して中央揃えにします
table タグを使用する代わりに、display: table-cell を使用します。水平方向の中央揃えと垂直方向の中央揃えを実現できますが、この方法では外部コンテナとして追加の要素を追加する必要があります。 。
<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>
ログイン後にコピー
CSS:
.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}.center-core img { width: 33%; height: auto;}ログイン後にコピー
注: div が折りたたまれないようにするには、width: 100% を追加する必要があり、外側のコンテナー要素にも特定の幅を追加する必要があります。コンテンツを垂直方向に中央揃えにする高さ。 html と本文の高さを設定した後、要素を本文の垂直方向の中央に配置することもできます。このメソッドは、IE8 以降のブラウザで有効になります。
絶対配置と中央揃えを使用する
このソリューションは、非常に優れたクロスブラウザー サポートを備えています。欠点の 1 つは、外側のコンテナ要素の高さを明示的に宣言する必要があることです。
.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}ログイン後にコピー
Stephen は、このアプローチのいくつかのバリエーションをブログで示しています。
translate を使用したセンター
Chris Coiyer は、CSS 変換を使用した新しいソリューションを提案しました。 また、水平方向のセンタリングと垂直方向のセンタリングもサポートしています:
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}ログイン後にコピー
ただし、次の欠点があります:
-
一部のブラウザでは、CSS 変換でプレフィックスを使用する必要があります。
-
IE9 以下のブラウザには対応していません。
-
絶対配置されたコンテンツの高さは取得できないため、外側のコンテナーは高さを設定する (または他の方法で設定する) 必要があります。
-
コンテンツにテキストが含まれている場合、現在のブラウザー合成テクノロジーではテキストがぼやけてしまいます。
センタリングには Flexbox を使用する
新旧の構文とブラウザの接頭辞の違いがなくなると、この方法が主流のセンタリング ソリューションになるでしょう。
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}ログイン後にコピー
フレックスボックスは多くの点でシンプルなソリューションですが、古い構文と新しい構文の両方があり、IE の以前のバージョンではサポートされていません (ただし、display: table-cell はフォールバック ソリューションとして使用できます)。
仕様が完成し、ほとんどの最新ブラウザでサポートされたので、詳細なチュートリアル Tutorial を作成しました。
センタリングには calc を使用します
場合によっては、フレックスボックスよりも包括的です:
.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}ログイン後にコピー
非常に簡単に言えば、calc を使用すると、現在のページ レイアウトに基づいて寸法を計算できます。上記の単純な計算では50%がコンテナ要素の中心点となりますが、50%だけを設定すると画像の左上隅がdivの中心に揃えられてしまいます。 画像を幅と高さの半分だけ左上に移動する必要があります。計算式は次のとおりです:
top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
ログイン後にコピー
現在のブラウジングでは、コンテンツの幅と高さが固定サイズの場合、この方法がより適していることがわかります:
.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }ログイン後にコピー
Iこの記事ではCalcについて詳しく解説しています。
このスキームには、flex と同じ欠点が多くあります。最新のブラウザーでは十分にサポートされていますが、古いバージョンでは依然としてブラウザー プレフィックスが必要であり、IE8 ではサポートされていません。
.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}ログイン後にコピー
もちろん、他にもオプションがあります。これら 7 つのオプションを理解すると、Web 開発者は要素の中央揃えに直面したときにより多くの選択肢を得ることができます。
【この記事はthenewcodeから編集したものです】
補足：CSSを使った縦方向中央揃えの5つの方法と操作例
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
