常に画面のど真ん中に文字を配置するCSS
2019年09月11日 12時00分 月齢:12.1[十三夜] 潮汐:中潮
(最終更新日:2019年09月16日)
5年前に投稿 | ウェブ・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日]
- ← PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。
- 新しい記事 [2019年09月13日]
- → PHPでランダムに選択問題を出し続ける仕組みをつくる。
他にも「ウェブ・IT関係」カテゴリの記事はいかがですか。
- パンヤの再インストールに苦しんだ
- Firefox プラグインの警告「このページの表示に使用するプラグインが古いので更新してください。」を消す。
- MD-5000をネットワークプリンタにした。
- 電子署名・電子証明書をフリーで試してみた。
- PWA(Progressive Web Apps)を用いた「ホーム画面に追加」機能(Service Worker)で、ウェブサイトがまるでアプリのようになる。
- Microsoft Wordの10.5ポイントが気持ち悪い。
- いまだにHTML形式のメールが嫌い。っていうかこの世からなくなってもいい。
- EC-CUBE ダウンロード商品で通常モードのPayPal決済に対応させる。
- フリーソフトでスケジュール管理はじめました。
- PhotoshopやIllustratorが無料で手に入る?!