CSS の配置

自分用の備忘録。
真ん中にしたいのになかなかできない

１つずつ載せる。

#Hamlは共通
.payment-information
.payment-information__form
%span.payment-information__form--item-price ¥680
%span.payment-information__form--item-shipping 送料込み
.payment-information__form--point
%button{:type => "submit"} ポイントはありません

#1-1 SCSS
.payment-information{
width:320px;
height: 300px;
margin: 0 auto;
background-color: aqua;
text-align: center;
&__form{
display: flex;
justify-content: center;
&--item-price{
font-weight: bold;
}
&--item-shipping{
color: red;
font-weight: normal;
margin-left: 20px;
}
}
}
#1-2

#2-1
.payment-information{
width:320px;
height: 300px;
margin: 0 auto;
background-color: aqua;
text-align: center;
&__form{
// display: flex;
// justify-content: center;
&--item-price{
font-weight: bold;
}
&--item-shipping{
color: red;
font-weight: normal;
margin-left: 20px;
}
}
}
#2-2

#3-1
.payment-information{
width:320px;
height: 300px;
margin: 0 auto;
background-color: aqua;
text-align: center;
&__form{
display: flex;
justify-content: center;
&--item-price{
font-weight: bold;
}
&--item-shipping{
color: red;
font-weight: normal;
margin-left: 20px;
}
}
}

#3-2

親要素にtext-align: center;をしているので、全て真ん中に行くかと思いきや、行かなかった。
子要素にdisplay:flex;がある為だった。
子要素のdisplay:flex;を外すか、justify-content: center;を記述する事で解決！

justify-contentは「display:flex;」したやつをどこに置くのかを指定できるとのこと。