アニメーションでtransformを使っていて詰まることがあったので、使えそうなものをここでまとめておきます。
デモはまとめてこちらにdemo
左右中心揃えにする方法
まず、HTMLは共通でこちら。
<div class="box">
<div class="box__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>幅方向に中央揃えする方法はもはや紹介不要な2つですが、
初心者にも向けた備忘録なので一応。
text-align:center
.box {
text-align: center;
}margin: 0 auto;
.box {
.box__item {
width: 80%;
margin: 0 auto;
}
}上下左右中央揃えにする方法
さて、ここからがこの記事のメインです。
各方法重要なところだけピックアップしています。
transform: translate(-50%, -50%);
.box {
position: relative;
.box__item {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
}個人的には一番使っているのがこの方法。
position: absolute;を指定した要素の基準点は初期値では要素の左上にあります。
その基準点をtransform: translate(-50%, -50%);で.box__itemの中心に指定したのち、top: 50%; left: 50%;で.boxの中心に指定している感じですね。
フレックスボックのjustify-content、align-itemsを利用する方法
.box {
display: flex;
justify-content: center;
align-items: center;
.box__item {}
}これはpositionじゃないなーって感じた時に使っています。
フレックスボックスのjustify-content,align-itemsで.boxの子要素を幅方向、高さ方向共に中心に配置した結果、上下左右中央揃えとなっています。
フレックスボックスの使い方はこちらでも紹介しています。
transform: translate();を使わずにposition: absolute;で中心に持ってくる方法
.box {
position: relative;
.box__item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}最後にこちら。
先ほど紹介した、transform: translate();を使わない方法でもうひとつ。
正直これの理屈はあんまりわかってないんですけど、笑
上下左右全部の距離を0としておいて、margin: auto;で中心に持ってくる感じですね。
margin: 0 auto;で真ん中寄せにする感覚で使ってもらえれば◎
