【CSS】position: absolute;で要素を中央寄せする方法【プログラミング】

プログラミング

おはこんばんにちは!ノボルです。

CSSの勉強してるんだけど、「position: absolute;」を使って要素を中央寄せすることってできるの?

もちろんできるよ!サクッと説明するね。


そこで今回は、「position: absolute;」を使って要素を中央寄せする方法について解説します!

左右を中央寄せする方法

See the Pen gObzdEM by monkey d ruffy (@ruffy126) on CodePen.

左右のpositionを0にして「margin: auto;」で左右を中央寄せできます。

上下を中央寄せする方法

See the Pen NWPMLJg by monkey d ruffy (@ruffy126) on CodePen.

今度は、上下のpositionを0にして「margin: auto;」で上下を中央寄せできます。

上下左右ともに中央寄せする方法

See the Pen povVOYa by monkey d ruffy (@ruffy126) on CodePen.

最後は、ド真ん中に配置する方法です。上下左右のpositionを0にして「margin: auto;」で上下左右ともに中央寄せすることができます。

ちなみ、上の方法だとどうしても上手くいかないことがあります。その場合は、下記のtransformプロパティを使ったやり方を試してみてください。

See the Pen bGNMmGr by monkey d ruffy (@ruffy126) on CodePen.

最後に

今回の記事では、「position: absolute;」を使って要素を中央寄せする方法について解説しました。

CSSを使っていると中央寄せする機会が多いので、いろんな方法に慣れておきましょう!

最後まで読んで頂き、ありがとうございました(o^^o)

【CSS】超簡単!コピペで作れるオシャレなボックスデザイン30選!
おはこんばんにちは!ノボルです。 ブログでボックスデザインを作りたいんだけど、どうやってするの? という方のために、今回は、完全コピペで作れるボックスデザインを30個紹介します。全てレスポンシブ対応で、HTMLとCSSのコピペだけで使うこと...
【初心者】CSSが効かないときの対処法!
おはこんばんにちは!ノボルです。いきなりですが、CSSを書いたけど効いてない!といった経験はありませんか?ちゃんとHTMLのheadにスタイルシートを読み込んだのに・・・。CSSの書き方は合ってるはずなのに・・・。イライラばかり募りますよね...
【CSS】マウスを乗せたときにボーダーが伸びるアニメーション
おはこんばんにちは!ノボルです。 今回は、マウスを乗せたとき(マウスオーバー)にボーダーが伸びるCSSアニメーションをご紹介します。 コードだけだとイメージがつかないかもしれないので、CodePenで動きが確認できるようにしました! ほぼコ...

コメント

タイトルとURLをコピーしました