FlexBoxで縦に均等に分割するし、中のテキストも縦中央寄せしたい

こちらのサイトさんを元に、縦に均等に分割するし、中のテキストも縦の要素に沿って縦中央ぞろえを行いたいです。

参考：https://blog.webarata3.link/flexbox-even

HTML
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="utf-8">
5  <title>テスト</title>
6  <style>
7   body {
8    padding: 0;
9    margin: 0;
10   }
11 
12   main {
13    display: flex;
14    flex-direction: column;
15    height: 100vh;
16   }
17 
18   .inner {
19    border: 1px solid black;
20    flex: 1;
21   }
22  </style>
23 </head>
24 <body>
25  <main>
26   <div class="inner">テスト1</div>
27   <div class="inner">テスト2</div>
28   <div class="inner">テスト3</div>
29  </main>
30 </body>
31</html>

今回の場合は、テスト１、テスト２が要素の一番上に表示されていますが、これを要素の縦中央に配置したいです。

flexの各種オプションをあててみたのですがこれに沿う結果を得られることが出来ませんでしたので、こちらでご質問させていただきます。

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

回答3件

ベストアンサー

CSS
1  .inner {
2    display: flex;
3    align-items: center;
4  }

https://developer.mozilla.org/ja/docs/Web/CSS/align-items

投稿2018/11/13 07:50

x_x

総合スコア13749

sanset

2018/11/13 07:55

ありがとうございます。innerのほうに記載するのは試していませんでした。

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

こんな感じですか？
切り貼りしたので構文的に間違えてるーと怒られるかもしれませんが...

投稿2018/11/13 07:56

退会済みユーザー

総合スコア0

sanset

2018/11/14 03:29

遅れて申し訳ありません！ちょうどベストアンサーを選んだ後の投稿でしたので気づきませんでした…具体的なコードを教えて頂きありがとうございます！

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

やりたいことがイマイチわかりませんが
下記のいずれか、または両方を追加してみてください。

CSS
1main{
2 justify-content: center; /*縦方向の中央*/
3 align-items: center; /*横方向の中央*/
4}

投稿2018/11/13 07:52

yamana

総合スコア118

sanset

2018/11/13 07:56

回答ありがとうございます。子要素のテストを親要素の幅の高さの中央揃えにしたかったという質問でした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

FlexBoxで縦に均等に分割するし、中のテキストも縦中央寄せしたい

関連した質問