CSSでボックスを画面の左右中央に縦に並べたい

Question

実現したいこと

divタグのクラスに対してCSSでボックスを作成し，複数生成したそれらを画面の左右中央に縦に並べたいです

前提

画面背景をposition:abusolute，width:100%で指定し，
それらに対して新たに二つのボックスをposition:relativeで配置したいです．

先の開発では，それらの作成したboxに対してposition:abusoluteで要素を配置していこうと思っています．

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

問題としては，boxが横並びになってしまうという形です．
}

該当のソースコード

          <div id="start-screen" className="background">
            <div id="title_box">
              <p id="yokoso">ようこそ</p>
            </div>
            <div id="ctachfrase_box">
              <p id="あ">あ</p>
            </div>
          </div>

#start-screen {
  position: absolute;
  width: 100%;
  height: 7200px;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 276px;
  background: #FFDDDD;
}
#title_box {
  position: relative;
  min-width: 804px;
  height: 658px;
  left: 0px;
  top: 0px;
  background: #F5F5F5;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
#ctachfrase_box {
  position: relative;
  width: 180px;
  height: 200px;
  left: 0px;
  top: 700px;
  background: #F5F500;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;

試したこと

flex-direction: column;
等の記述を加えると縦に並びはするのですが，そうするとようこその方(tittle_box)のwidthが二つのboxを加算したものになってしまい，非常に横長のboxが二つ出来上がることになります．

align-items: flex-center;
を書くとimg画像が縦に並ぶといった旨の記事はみましたが，何も変わりませんでした．

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

かなり初歩的な質問で申し訳ありません．
また，実現したい内容が全く別の方法で可能なのであればそれでもかまいません．

一応環境としてはreactを用いたjavascript内で書いています．

その他，補足内容等が必要でしたら，コメントしていただけると幸いです．

Answer 1

Flexboxでアイテムを『画面の左右中央に縦に並べたい』ということなら、下記になります。

  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 交差軸(columnの場合は水平方向)の中央 */

最終的な理想のレイアウトが不明確ですが、とりありずサンプルコードを提示しておきますのでご参考に。

#start-screen {
  width: 100%;
  height: 7200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 276px;
  background: #FFDDDD;
  box-sizing: border-box;
}
#title_box {
  min-width: 804px;
  height: 658px;
  background: #F5F5F5;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
#ctachfrase_box {
  width: 180px;
  height: 200px;
  margin-top: 42px;
  background: #F5F500;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}

Comments

[narimi]

出来ました，，，！
ありがとうございます！