新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

position:absolute;で上下左右中央寄せにする方法【CSS】

2019.4.22

position:absolute;で上下左右中央寄せにする方法【CSS】
Web制作 0 0

こちらの記事は、このような方におすすめです。

・「ブロック要素を中央寄せにしたい」という方
「左右の中央寄せは他にもあるけれど、上下の中央寄せの方法が知りたい」という方

妙高Web屋LINE@ 友だち追加

CSSで、様々なタイプの要素を中央に寄せる方法は様々あります。

当サイトでも、ときおり記事として紹介させていただいています。

今回ご紹介する中央寄せの方法は、「【position:absolute;】を使って、要素を上下左右それぞれ中央寄せにする方法」です。

つまり、左右中央寄せ、そして上下にも中央寄せするという方法です。

この記事の目次

【結論】CSSの[position:absolute;]で要素を上下左右中央寄せにする方法

まずは結論からです。

[.centerInner]というclass名のブロック要素が、上下左右中央寄せにしたい要素であり、[.sampleBox]が、それをすぐ外から包んでいるブロック要素だと仮定した場合、下記のコードでいかがでしょうか。

.sampleBox {
position:relative;
}
.centerInner {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:100px; // 任意の幅
height:100px; // 任意の高さ
}

念のためですが、width属性とheight属性は任意の値です。

上下左右中央寄せにしたい要素の大きさに合わせてみてください。

ページの先頭へ戻る

[詳細]ブロック要素を上下左右中央寄せにする件

まず、外側の要素で「relative」にして、内側の要素で「absolute」にするのはposition属性を利用する場合の定番のひとつかと思います。

先ほども申し上げた通り、widthとheightは任意の値です。

肝になるのはそれ以外の部分、つまり「上下左右4方向のゼロと、【margin:auto;】」です。

こちらを設定することで、特定の要素を上下左右中央寄せにできることがあります。

ページの先頭へ戻る

いかがでしょうか?

こちらの記事で紹介している方法で要素が中央に寄らない場合でも、その一部は、他の方法で解消できる場合もあります。

参考までに、下記のリンクをご覧ください。

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ