次の中から選んでね
- transform: translate
- margin: 0 auto
- position: absolute
transformが好きなあなた
普通の人。みんな大好きtransform。
要素を変形するには万能なCSSプロパティ。
<div class="box"></div>
<div class="box box--move"></div>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
}
.box--move {
transform: translate(100px, 0);
}
まあこうなる。
では、これは？
<div class="box box--move-large"></div>
<div class="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 移動することになる。
margin: 0 auto が好きなあなた
安定志向。
昔ながらの伝統的な中央寄せ。
<div class="box box--center"></div>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
}
.box--center {
margin: 0 auto;
}
コンポーネント指向が浸透した昨今は
レイアウトは親要素に任せる方が適切なシーンが多い。
※ .box はどこに配置さるかを気にしない
<div class="container">
<div class="box"></div>
</div>
.container {
display: flex;
justify-content: center;
}
position: absoluteが好きなあなた
きっと、すいも甘いも知った人。
absolute の従順さに惚れ惚れする。
<div class="container">
<div class="box box--bottom"></div>
</div>
.box--bottom {
position: absolute;
bottom: 10px;
right: 10px;
}
.container {
width: 80%;
height: 300px;
border: 1px solid blue;
margin: 20px auto;
}
親要素をたどって起点を探す
absoluteの bottom, right が基準となるのは position: relative がついている親要素。
つまり、 .container に position: relative を設定すれば
.container を基準としたポジションとなる。
.container {
position: relative;
}
従順なやつだなと思う。