MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

CSS中央配置方法解説(absolute/margin/flexbox/grid)

【HTML&CSS】中央配置の方法解説!王道4パターンをコード付きで紹介

どうも、ダイチです。

今回はHTML・CSSコーディングで必ず必要となってくるテクニック「中央配置」についてまとめました。

初学者の方からすれば、一から考えてコーディングするのは難しいかもしれませんが、すべてコード付きでご紹介していきます。

コピペもできるようにしてるので、もし知らない配置方法があればチェックしてみてください。

目次

中央配置の基礎的な考え方

はじめに、中央寄せのコードを紹介する前に大前提のお話だけ。「中央」とは「空間的にまんなかの位置」という意味です。

要は「ここからここまで」という区間があって初めて「中央」という考えが存在します。当たり前ですよね。

そして、HTMLには「ブロックレベル要素」「インライン要素」があります。

TAG index
HTMLタグ/HTMLの基本/ブロックレベル要素とインライン要素 - TAG index

ブロックレベル要素は幅や高さがあり、Webページの中で文字通りボックス(=空間)として存在しています。幅も指定しなければ、画面幅いっぱいまで領域を拡げます。

インライン要素はボックスとして存在していなく、要素自体(テキストなど)の高さや幅がそのものの大きさになります。

今回やりたいのはWebページの空間の中で、レイアウトとして中央配置することを想定しているので、ボックス(=空間)として存在するブロックレベル要素は中央配置できますが、要素そのものが空間を持っていないインライン要素内では中央指定できません。

もし思ったように要素が動かない時は、指定している要素がインライン要素ではないか確認してみてください。

何かの要素を中央配置したい時はブロックレベル要素に指定する必要があります。

逆に、中央配置したい要素がインライン要素だったとしても、それをブロックレベル要素で包んでしまえば中央配置指定できる、ということですね。

それではここから実際のパターンを紹介していきます。

<div class="parent base">
     <div class="child base-center"></div>
</div>
.parent {
   background-color:gray;
   width:100%;
   height:300px;
 }
 .child {
   background-color:tomato;
   width:300px;
   height:100px;
 }

ちなみに今こんな感じになってます。

グレーがclass=”base”、オレンジがclass=”base-center”です。今から紹介していく方法でbase-centerを中央配置させます。

コピペする場合は、上のCSSの続きから追記していけばbase-centerが動きます。

absoluteで中央配置

.base {
  position: relative;
}

.base-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. position: absoluteで要素左上の位置を中央まで動かす
  2. transform: translateでbase-centerの横半分(-50%分)の大きさを左方向へ移動させる
  3. transform: translateでbase-centerの縦半分(-50%分)の大きさを上方向へ移動させる
Image from Gyazo

「translateで正しい位置に戻している」という考え方が理解できれば、わかりやすい配置方法かと思います。

ただ、動かしたい要素自体に傾きがかかっている場合など、期待通りの動き方をしないことがあります。

例えばrorateで傾きがある場合

傾きのある中央寄せ図1

top、leftで位置指定するまではいいんですが、

傾きのある中央寄せ図2

最後translateで傾きが変わってしまいます。

傾きのある中央寄せ図3

こういう場合は次のmarginで指定する方法がいいでしょう。

marginで中央配置

.base {
  position: relative;
}

.base-center {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
 }

absoluteの位置指定がauto以外で、marginがauto指定されている場合、その要素間で自動的に等間隔の位置に配置されます。

例えば、top:20px・bottom:50pxと指定されていた場合に、margin-top:autoとmargin-bottom:autoであれば、20px、50pxの位置の中で中央に配置されます。

上下左右中央揃えの場合、全方向に数値(今回だったら0)を指定して、margin:autoを指定することで上下左右の中央に配置される、ということです。

ちなみに先ほどtransformで指定していた傾きのある要素も、そのままの記述でこのように中央に配置できます。

傾きのある中央寄せ図4

Flexboxで中央配置

.base {
  display: flex;
  justify-content: center;
  align-items: center;
}

次はdisplay: flexを使ったやり方です。

display: flexは親要素に指定することで、子要素をコントロールすることができます。

テキストに対しての擬似要素であったり、細かい範囲内での指定出なければ基本的にはこのFlexboxが汎用性も高いのオススメかなと思っています。

今はIE 11でもベンダープレフィックスなしで動作するので、上記のように非常にシンプルな記述だけで上下中央配置ができます。

gridで中央配置

.base {
  display: -ms-grid;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  display: grid;
  justify-content: center;
  align-items: center;
}
/* IE対応のためにプレフィックス付きで記述しています */

IE対応の考慮さえしなくてよければ、Flexboxと同じくらい自由度があり、記述も短くて済むレイアウト方法ですね。

親要素にdisplay: gridを指定した場合、そのグリッドコンテナ内に余白があれば(グリッド位置の指定をしていなければ)要素を自由に配置できます。

プロパティはFlexboxと同様です。

⇒justify-content
フレックスボックスではコンテナーの主軸、グリッドレイアウトではグリッドコンテナーの軸に沿って要素を揃える

⇒align-items
フレックスボックスでは交差軸方向、グリッドレイアウトではグリッド領域におけるアイテムのブロック軸方向に沿って要素を揃える

まとめ

個人的にはブラウザ対応状況や記述の少なさを考慮し、基本はFlexboxを使っていくのがいいかと思います。

position: absoluteも使いやすい方法ではあるので、場面に合わせて、という感じでしょうか。

プレフィックスが必要なgridは、中央配置のために使用するというより、全体のレイアウト構成がグリッドレイアウトの時などに要所で使うのがいいと思っています。

CSSでの中央寄せはも汎用的なテクニックでなので、コードはメモ帳にでもコピペしておいて使い回すくらいの方が捗ります。

「この記述はどういう意味なんだっけ?」と頭の中で考えていれば自然と覚えていきますので、初学者の方もご安心を。

それでは今回はこのへんで!

【HTML&CSS】中央配置の方法解説!王道4パターンをコード付きで紹介

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる