[CSS]divを中央に配置したい
解決したいこと
現在Reactで投稿用フォームを作成しています。
JSXのHTMLとCSSの記述で苦戦しております。
「1.基本データを入力してください」等のdivコンテンツが左に寄っているため
中央に配置されなく苦戦しています。
該当するソースコード
HTML
<div className="recruitmentPage">
<h1>里親を募集する</h1>
<div className="container">
<h2>1.基本データを入力してください</h2>
～省略～
</div>
<div className="container">
<h2>2.詳細を入力してください</h2>
～省略～
</div>
</div>
<button className="postButton">投稿する</button>
</div>
CSS
.recruitmentPage {
align-items: center;
justify-content: center;
}
.container {
background-color: white;
border-radius: 10px;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
width: 70%;
padding: 10px 40px;
margin: 20px;
}
試したこと
以下のCSSが適用されないので解決に時間がかかっています。
align-items: center;
justify-content: center;
0
