常に画面のど真ん中に文字を配置するCSS

2019年09月11日 12時00分 正午の月齢:12.1 月名:十三夜 潮汐:中潮 月齢:12.1[十三夜] 潮汐:中潮
(最終更新日:2019年09月16日)
4年前に投稿 | ウェブ・IT関係 | コメントはありません

2分ぐらいで読めます。

ふだんはあまりセンタリングしないのですが、どうしても画面のど真ん中に文字を配置したくなって、CSSを探してみるといろいろな方法がありました。その中でも特にシンプルなものを備忘録として書いておきます。

HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>どまんなか</title>
</head>

<body>
<p>どまんなかにテキストが出るよ</p>
</body>

</html>

CSS

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

p {
text-align: center;
}

記述が少なく安定しているので、いろいろと応用がきくと思います。

…ところで数年前に勤務管理システムを構築したとき、あのときもスタート画面のど真ん中にテキストを配置したんだけど、どんなCSS書いたかな。うーん、全然覚えてない。

古い記事・新しい記事

古い記事 [2019年09月09日]
←
新しい記事 [2019年09月13日]
→

他にも「ウェブ・IT関係」カテゴリの記事はいかがですか。

コメントはありません

ごめんなさい、コメントフォームは閉鎖しています。

Translate »