NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. CSS
  3. CSS3で要素の上下中央配置 - Part2

CSS3で要素の上下中央配置 – Part2

CSS3で要素の上下中央配置 – Part2

Part1ではCSS3のpositionとtransformを使ってhtml要素を上下中央配置しましたが、Part2はplace-itemを使って上下中央配置する簡単なサンプルコードを記述してます。

目次

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

上下中央配置 – Part2

place-item: center; を親要素に指定することで、簡単に要素を上下中央に配置することが出来ます。子要素は特に指定する必要がありません。

/*親要素*/

.parent {
		  display: grid;
		  place-items: center;
	}

サンプルコード

以下は実際に、place-item: center; を使用したサンプルコードとなります。

<section>

	<style>
		.parent {
			display: grid;
			place-items: center;
			height: 200px;
		}
	</style>

	<div class="parent" style="background: #3cb70d; color:#fff;">
	    <!--子要素に文章を配置-->
		<div>
			上下中央に配置されます。<br>
			配置する要素のサイズを指定する必要はありません。
		</div>
	</div>
	<div class="parent" style="background: #cacaca;">
		 <!--子要素に画像を配置-->
		<div>
			<img src="https://mebee.info/wp-content/uploads/2019/08/mebee_logo.png" alt="mebee" width="230" height="70">
		</div>
	</div>	

</section>

ブラウザ上で表示した結果

上下中央に配置されます。
配置する要素のサイズを指定する必要はありません。
mebee
Part1