CSS_html/css_WEB-ITnose で中央揃えを実現する 7 つの方法

Web ページ上で HTML 要素を中央に配置するのは簡単なことのように思えるかもしれませんが、複雑なレイアウトによって一部のソリューションがうまく機能しないことがよくあります。

Web ページのレイアウトでは、要素を垂直方向に中央揃えするよりも水平方向に中央揃えにする方がはるかに簡単です。多くの場合、水平方向の中央揃えと垂直方向の中央揃えを同時に実現するのが最も困難です。現在、レスポンシブデザインの時代では、要素の正確な高さと幅を知ることが難しいため、一部のソリューションは適切ではありません。私の知る限り、CSS で中央揃えを実現するには少なくとも 6 つの方法があります。次の HTML 構造を使用して、単純なものから複雑なものまで始めます。

<div class="center">  <img src="jimmy-choo-shoe.jpg" alt>  </div>

靴の画像は変更されますが、サイズは 500pxX500px のままです。 HSL カラーは、背景色の一貫性を保つために使用されます。

text-align を使用して水平方向に中央揃えにする

明らかな解決策が最良のオプションである場合があります:

div.center {  text-align: center;  background: hsl(0, 100%, 97%);  }  div.center img   {  width: 33%; height: auto;  }

この解決策では画像が垂直になりませんセンタリング: dc6dce4a544fdca2df29d5ac0ea9906b にパディングを追加するか、コンテンツに 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つの方法と操作例