CSS

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

悩める鈴木さん
佐藤先生!CSSで文字を画面の中心に出現するようにしたいのですが、どうすれば良いですか?

 

佐藤ティーチャー
CSSを使って文字などの要素を画面の中心に表示させるには、positionやdisplayなどの要素を活用すると出来るようになるんだ

 

悩める鈴木さん
そうなんですね!

 

佐藤ティーチャー
うん!一緒にコードを見ていこう

 

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

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

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

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

 

 

 

Pocket
LinkedIn にシェア

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

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

-CSS

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.