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

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

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

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

上下中央配置

position と transform を使用することで、簡単に要素を上下中央に配置することが出来ます。

サンプルコード

以下は実際に、positionとtransform を使用したサンプルコードとなります。

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

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