次の中から選んでね

transformが好きなあなた

普通の人。みんな大好きtransform。
要素を変形するには万能なCSSプロパティ。

<divclass="box"></div><divclass="box box--move"></div>

.box{width:100px;height:100px;border:1pxsolidred;box-sizing:border-box;}.box--move{transform:translate(100px,0);}

まあこうなる。

では、これは？

<divclass="box box--move-large"></div><divclass="box box--large-move"></div>

.box--move-large{transform:translate(100px,0)scale(2);}.box--large-move{transform:scale(2)translate(100px,0);}

順番を変えただけで見え方が変わってしまった。
これには理由がある。

適用される 1 つ以上の CSS 変形関数です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。
https://developer.mozilla.org/ja/docs/Web/CSS/transform

つまり、 2倍大きくなってからの translate(100px, 0)は 200px移動することになる。

安定志向。
昔ながらの伝統的な中央寄せ。

<divclass="box box--center"></div>

.box{width:100px;height:100px;border:1pxsolidred;}.box--center{margin:0auto;}

レイアウトは親要素に任せる方が適切なシーンが多い。
※ .boxはどこに配置さるかを気にしない

<divclass="container"><divclass="box"></div></div>

.container{display:flex;justify-content:center;}

きっと、すいも甘いも知った人。
absoluteの従順さに惚れ惚れする。

<divclass="container"><divclass="box box--bottom"></div></div>

.box--bottom{position:absolute;bottom:10px;right:10px;}.container{width:80%;height:300px;border:1pxsolidblue;margin:20pxauto;}

absoluteの bottom, rightが基準となるのは position: relativeがついている親要素。

つまり、 .containerに position: relativeを設定すれば
.containerを基準としたポジションとなる。

.container{position:relative;}

従順なやつだなと思う。