cssで完全に画面の中心(中央)に文字を表示する

[st-kaiwa2]佐藤先生!CSSで文字を画面の中心に出現するようにしたいのですが、どうすれば良いですか?[/st-kaiwa2]

 

[st-kaiwa4]CSSを使って文字などの要素を画面の中心に表示させるには、positionやdisplayなどの要素を活用すると出来るようになるんだ[/st-kaiwa4]

 

[st-kaiwa2]そうなんですね![/st-kaiwa2]

 

[st-kaiwa4]うん!一緒にコードを見ていこう[/st-kaiwa4]

 

CSSで文字などの要素を画面の中央に表示する方法

下記のようにコードを書けば文字が中央に来ます

<div class="container">404 | ページが見つかりません</div>
.container{
position: relative;
width: 100%; height: 100vh;
display: flex;
align-items: center; justify-content: center;
}

下記のCode Penで実行出来るので見てみましょう。

 

 

 

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です