magazine off

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

投稿日 : 2021年7月7日(水曜日)

[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で実行出来るので見てみましょう。

 

 

 

Categories

Recent Posts

node.js | Writing a thing that executes process B after process A is done.

  Not only in node.js, but also when wri…

投稿日 : 2021年6月3日(木曜日)

他人が書いたコードを読む方法 | プログラミング書くより読むほうが難しい。

  僕は新人プログラマーとしてプログラミングの勉強を始めた頃から、  …

投稿日 : 2021年3月31日(水曜日)

PythonでHTMLを解析する超入門

  説明 全くPython超入門編です。コピペで動きます。HTMLを解…

投稿日 : 2018年5月2日(水曜日)

スネークケース(snake_case)とは?現役プログラマーが分かりやすく解説します!

    プログラミングをしていると、命名規則という言葉に出会うでしょ…

投稿日 : 2021年7月3日(土曜日)