CSSで縦横中央配置を実現する方法をお話します-CSSチュートリアル-php.cn

CSSで縦横中央配置を実現する方法をお話します

青灯夜游

リリース： 2020-08-03 16:59:58

オリジナル

2058 人が閲覧しました

CSSで縦横中央配置を実現する方法をお話します

最近の面接で、面接官から CSS の水平方向と垂直方向のセンタリングのレイアウト方法について質問されました。フロントエンド初心者の私は間違いなく混乱しました。すぐに情報を調べました。落とし穴にはまらないように、それを分析して皆さんと共有しましょう。

まず、HTML といくつかの基本的な CSS スタイルについて説明します。以下では詳細は説明しません。
html

<body>
		<div class="div1">
			<div class="box  size">垂直水平居中</div>
		</div>
	</body>

ログイン後にコピー

パブリック CSS コードは次のとおりです

<style type="text/css">
			/* 公共样式 */
			.div1{
				width: 300px;
				height: 300px;
				border:1px solid aqua;
				
			}
			.box{
				background: #00FFFF;
			}
			.box.size{
				width:100px;
				height:100px;
			}
</style>

ログイン後にコピー

これらの CSS スタイルは、以降の紹介文にデフォルトで含まれます。なので詳細は説明しません！

1. 絶対値とマージン自動 (一般的に使用されます)

同様に、中央に配置された要素の幅と高さは固定する必要があり、子要素の幅と高さを知る必要があります
このように、全方向の距離を 0 に設定し、マージンを auto に設定すると、全方向の中央に配置できます

.div1{
				position: relative;
			}
			.box{
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				
				margin: auto;
			}

ログイン後にコピー

2. 絶対位置とマージン (負の値)

原理を簡単に説明します。絶対位置決めが使用されます。絶対位置決めのパーセンテージは、幅と幅に対する相対値です。親要素の高さなので、この原則に基づいて要素を中央に配置できます。ただし、絶対配置は子要素の左上隅に基づいていることに注意してください。ただし、子要素を中央に表示したい場合は、この問題を解決する必要があります。
このとき、効果を実現するためにマージンの負の値を使用できます。マージンが負の場合、要素は反対方向に配置されます。このようにして、サブ要素のマージンを次のように設定できます。サブ要素の幅と高さの半分。 (追記: 欠点は、子要素の幅と高さを取得する必要があることです)

.div1{
				position: relative;
			}
			.box{
				top: 50%;
				left: 50%;
				position: absolute;
				margin-top: -50px;
				margin-left: -50px;
			}

ログイン後にコピー

3. Absolute と calc

も子要素の幅と高さが必要です。固定されており、幅と高さがわかっているため、css3 には計算されたプロパティがあります。
上部のパーセンテージは、要素の左上隅から幅の半分を引いた値に基づいています (追記: 計算の互換性によって異なります)

.div1{
			   position: relative;
		   }
		   .box{
			   position: absolute;
			   top: calc(50% - 50px ); 
				/* 减号前后没有空格，该样式不生效*/
			   left: calc(50% - 50px );
		   }

ログイン後にコピー

このコードを書いているときに、興味深いものを発見しました。 thing, calc (50%-50px) マイナス記号の前後にスペースがないとスタイルが反映されませんスペースを入れると通常通り反映されます具体的な理由は分かりません emmmmm

以下のメソッドは、子要素の幅と高さを知らなくても設定できます。

html は次のように変更されます:

<body>
		<div class="div1">
			<div class="box">水平垂直居中，不需要子元素固定宽高</div>
		</div>
	</body>

ログイン後にコピー

The public css は次のとおりです

	.div1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.box{
				background: #00FFFF;
			}

ログイン後にコピー

4. Flex (一般的に使用されます)

flex は、いくつかの要素のみを必要とする最新のレイアウトソリューションです。センタリング効果を実現するためのコード行

.div1{
				display: flex;
				justify-content: center;
				align-items: center;
			}

ログイン後にコピー

5. line-height

インライン要素のセンタリング属性を使用すると、水平方向と水平方向を実現することもできます。垂直方向のセンタリング。ボックスをインライン要素として設定し、text-align を使用して水平方向の中央揃えまたは垂直方向の位置合わせを実現します (追記: この方法では、子要素でテキスト表示を目的の効果にリセットする必要があります)

          .div1{
				line-height: 300px;
				text-align: center;
				font-size: 0px;
			}
			.box{
				font-size: 10px;
				display: inline-block;
				vertical-align: middle;
				line-height:initial;
				/* 修正文字 */
			 	text-align: left;
	        }

ログイン後にコピー

#6. Absolute と transform

は子要素の幅と高さを固定する必要はありませんが、translate2d

           .div1{
				position: relative;
			}
			.box{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}

ログイン後にコピー

の互換性に依存します。 7. css-table

CSS の新しい table 属性は、通常の要素の表示効果を table 要素に変更でき、水平方向の中央揃えも実現できます

           .div1{
				display:table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.box{
				display:inline-block;
			}

ログイン後にコピー

上記中央寄せレイアウトの方法をいくつかまとめてみましたが、他にも方法があればぜひ追加してください！

個人的な感想: 私は absolute margin auto、flex、absolute、transform が好みです。モバイル端末では flex を使用するのが最善です。絶対マージン auto が好きです

おすすめの関連チュートリアル:

CSS ビデオチュートリアル、CSS3 ビデオチュートリアル

以上がCSSで縦横中央配置を実現する方法をお話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。