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

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

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

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

上下中央配置 – Part2

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

サンプルコード

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

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

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