こんにちは、こんばんは、AKデザインの円盤です。
今回はCSSでよくお世話になるposition設定のabsoluteで中央に寄せたい時のお話です。
毎回Googleで検索するのが面倒なので自分用にメモしておきます。
この記事が誰かのお役に立てれば幸いです。
全体からの中央寄せ
HTMLの書き方はこちら。
HTML
<div class="wrapper">
<div class="hogehoge">
ここに文字や画像やdivやliが入ります。
</div>
</div>はい、全体を包むものと中身を包むものを設定します。
CSS
.wrapper {
position: relative;
}
.hogehoge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}はい、これでhogehogeがwrapperから見て上下中央から真ん中に入ります。
はい、必ずabsoluteを包むrelativeを設定してください。
これがとても便利なのでよく使ってます。
flexで中央寄せもいいですが、あちらは便利だけど位置の融通が利かないケースが多かったりします。
カードを並べる時の均等配置はflex最強です。
position設定なので、z-indexとかwidthやheightも入れれば細かく位置調整や階層調整も出来ます。
leftを0％にすれば左寄せも可能です。
中央からの中央寄せ
次に中央から中央に寄せる方法のご紹介です。
日本語おかしいですが、中央から中央に寄せるのです。
初めてこれを知ったときは目から鱗でしたが、使える場面は案外あります。
.wrapper {
position: relative;
}
.hogehoge {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 必ず入力する;
height: 必ず入力する;
}よく似てるのですが、こちらの指定方法だと外側のwrapperの中央から見て中央配置になります。
つまり「left: 5px;」などにすると
左端から5pxではなく、中央から見て左に5px動く
ということになります。
-5pxとかにすれば、ネガティブmarginのように、もちろん反対にも動きます。
pxを%にすれば、相対で位置調整も可能です。あんまり使わないけどｗ
transformでも値を触れば、left: 40%;とかでも同じこと出来ますがかっこよくないんですよね。
後から見直しても何かわからないっていうｗ
というわけで状況に応じて使い分けています。
bootstrapなどが入ったCMSなどでは大活躍します。
!importantも併用してメインビジュアルの位置を無理やり調整するのに便利です！
お試しあれ！
まとめ
以上、css position absoluteの中央寄せの方法まとめでした。
自分はこの両方を状況に応じて、使い分けています。
何も考えてないときはtransform。
「あ、これごちゃごちゃしててやべぇｗ」って時はtopleftrightbottomの東西南北中央不敗のマスターアジアです。
このposition absoluteに加えて、flexのalign-itemsとjustify-contentを使えば、様々なレイアウト組み合わせが出来ると思います！
marginとpaddingも加えれば完璧ですね！
CSSでかっこいいレイアウトを作りましょう！
ではまた！
