자기가 쓴 비망록.
중간에 있고 싶은데 도저히 못하겠어요.
하나하나 게재하다.

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

부모 요소 텍스트 정렬:center;하고 있으니까 다 한가운데로 가는 줄 알았는데 안 갈 줄 몰랐어요.
서브원소:flex;있어서요.
하위 원소의display:flex;삭제 또는justify-content:center;기술로 해결!
justify-content는'display:flex'입니다.한 놈을 어디에 두었는지 지정할 수 있다.