CSSのheightのpxが効かない

前提・実現したいこと

CSSのheightで「投稿が完了しました」を画面の中央に配置したいのですが、教えていただけないでしょうか。
よろしくお願い申し上げます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<html> <div class=text_complete> <h1>投稿が完了しました</h1> </div> <css> .text_complete { text-align:center; height:100px; }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/08/28 08:15

text-alignだと横位置です。widthもないので効かないのは当然と言えば当然ですが、つまるところ、どのように配置したいのですか？図示してください。（調べて何も出なかったですか？）あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

tky0134

2020/08/28 08:27

text-align:centerで横位置は中央にしたのですが、縦位置も中央にしたいと考えております。

m.ts10806

2020/08/28 08:28

では、そのように質問編集してください。既に書いてますが、できれば齟齬なくすために図示してもらえると良いのですけど。あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/08/28 08:32

マークダウンのcodeについて、下記では分かりませんでしたか？↓ https://teratail.com/questions/238564

Lhankor_Mhy

2020/08/28 08:51

>マークダウンのcodeについて、下記では分かりませんでしたか？ ↓どぞー https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1html,
2body {
3    height: 100%;
4}
5
6.text_complete {
7    display: flex;
8    justify-content: center;
9    align-items: center;
10    height: 100%;
11}