flexboxで中央配置できない理由が分からない

progateの道場コース（自分で、お手本のサイトを見ながら作っていくコース）で
flexboxを使ってレイアウトしていて分からなくなりました。
align-items:center;と指定しているのに、真ん中に配置されません。
理由を教えてください。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <header>
13    <div class="container">
14      <div class="header-left">
15        
16      </div>
17      <div class="header-right">
18        
19      </div>
20    </div>
21   
22    
23  </header>
24  <div class="top-wrapper">
25    <div class="container">
26      <h1>LEARN TO CODE.
27      <br>
28      LEARN TO BE CREATIVE.
29      </h1>
30      <p>
31        Progateはオンラインプログラミング学習サービスです。
32        <br>
33        初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
34      </p>
35      <a href="#" class="btn sign up">新規登録はこちら</a>
36      <p>or</p>
37      <a href="#" class="btn facebook"></a>
38      <a href="#" class="btn twitter"></a>
39    </div>
40  </div>
41  
42</body>
43</html> 
44---```ここに言語を入力
45コード

css
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.top-wrapper{
23  display:flex;
24  justify-content:center;
25  align-items:center;
26  
27}``````ここに言語を入力
28コード

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

回答1件

ベストアンサー

height プロパティを指定することで、質問者さんの実現したいことは行なえると思います(動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet.css">
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10
11<body>
12  <header>
13    <div class="container">
14      <div class="header-left">
15
16      </div>
17      <div class="header-right">
18
19      </div>
20    </div>
21
22  </header>
23  <div class="top-wrapper">
24    <div class="container">
25      <h1>LEARN TO CODE.
26        <br> LEARN TO BE CREATIVE.
27      </h1>
28      <p>
29        Progateはオンラインプログラミング学習サービスです。
30        <br> 初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
31      </p>
32      <a href="#" class="btn sign up">新規登録はこちら</a>
33      <p>or</p>
34      <a href="#" class="btn facebook"></a>
35      <a href="#" class="btn twitter"></a>
36    </div>
37  </div>
38
39</body>
40
41</html>

CSS
1html,
2body,
3ul,
4ol,
5li,
6h1,
7h2,
8h3,
9h4,
10h5,
11h6,
12p,
13div {
14  margin: 0;
15  padding: 0;
16}
17
18body {
19  font-family: "Hiragino Kaku Gothic ProN W3", sans-serif;
20}
21
22li {
23  list-style: none;
24}
25
26a {
27  text-decoration: none;
28}
29
30.top-wrapper {
31  display: flex;
32  justify-content: center;
33  align-items: center;
34  height: 100vh; /* 追記 */
35}