【CSS】fixedでの中央揃えの例|固定した要素内を上下左右の中央揃え

今回は、CSSのposition: fixed; で要素を固定した場合に、その要素内を上下左右の中央揃えにする例となります。

【CSS】position: fixed;での中央揃えの例

以下のCSSの例では、classにwrapを持つ要素をposition: fixed;で固定して画面全体のサイズを指定し、その子要素を上下左右の中央揃えとしています。

See the Pen CSS position: fixed; & centered by yic666kr (@yic666kr) on CodePen.

以下、中央揃えに関するCSSの説明となります。

要素のサイズを画面全体にする方法

要素のサイズを画面全体にする方法については、以下のリンク先を参考にしてみてください。

要素を上下左右の中央揃えにする方法

上下左右の中央揃えはFlexboxで実装しています、詳しくは以下のリンク先を参考にしてみてください。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。