【CSS】要素の上下・左右中央寄せの方法7選【初心者向け】

Webサイト制作でレイアウトを組む上で、要素の中央配置の仕方をきちんと理解してるかどうかはとても重要です。しかし、中央寄せの仕方は沢山ありすぎる・・・・。

そこで今回の記事では、自分の備忘録も兼ねて上下や左右中央寄せの方法を一覧にしてみました。

実装方法

今回の記事のサンプルで使う共通のHTMLとCSSは下記の通りです。

HTML

<div class="parent">
    <div class="child">
        Lorem ipsum dolor sit amet・・・
    </div>
</div>

CSS

.parent{
  height: 300px;
  background-color: #ccc;
}
 
.child{
  background-color: skyblue;
}

左右の中央寄せ

text-align: center

インライン要素(テキストや画像)の中央寄せは簡単です。

中央寄せしたいインライン要素を内包するブロック要素、またはその親要素に対してtext-align:center;を指定します。下記の例の場合.childに指定していますが、.parentに指定しても、中央寄せ出来ます。

CSS

.child{
  text-align: center;
}

margin: 0 auto

サイトを制作していると、中央寄せのレイアウトでかなりお世話になります。

中央寄せしたいブロック要素にmargin: 0 auto;を指定するだけです。widthの指定が必須ですので忘れないようにしましょう。

CSS

.child{
  width: 200px;
  margin: 0 auto;
}

display: inline-block

widthを指定せず、内容量に応じた幅で中央寄せしたいときはこちらの方法を使います。

親要素にtext-align:center;を指定し、中央寄せにしたい要素にdisplay: inline-block;を指定します。ブロックは中央寄せで、テキストは左揃えにしたいという時にも便利です。

CSS

.parent{
    text-align: center;
}
  
.child{
    display: inline-block;
    text-align: left;
}

上下の中央寄せ

line-height

line-heightの数値を親要素の高さと同じにすることで、インライン要素を上下中央に配置します。

ただし、この方法はテキストが1行の時だけ限定で、2行以上になる場合は使えません。text-align:centerも指定すれば、上下左右中央になります。

CSS

.child{
    line-height: 300px;
}

vertical-align: middle

ブロック内の、インライン要素を上下中央寄せにしたいときはvertical-alignを使います。

vertical-alignはインライン要素かテーブルセルにしか指定できないという特徴があるので、上下中央寄せしたいテキストを内包する要素にdisplay:table-cell;を指定し、テーブルセル化します。そしてvertical-align:middle;を指定するとインライン要素が上下中央寄せになります。

もちろん、text-align:centerも指定すれば、上下左右中央になります。こちらは上の方法と違いテキストの段落が2行以上になっても問題ありません。

CSS

.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

上下左右の中央寄せ

absolute + transform

ブロック要素や画像を上下中央に配置する一番簡単な方法です。

top:50%;で要素の左上を起点として50%移動し、left:50%;で要素の左上を起点として50%移動します。そして最後にtransform:translate(-50%, -50%);で、要素の大きさの半分ずつ位置を戻します。

left:50%;を消してtransformをtransform:translateY(-50%);にすると、上下のみ中央寄せになります。中央寄せした要素の横幅は基本成り行きですが、中央寄せしたい要素にwidthの指定がない場合は、widthは最大で親要素の50%にまでしかなりません。

CSS

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

display: flex

とても便利なflexbox。

親要素に下記のように指定するだけです。transformと違い、中央寄せした要素の横幅は成り行きになります。

CSS

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

まとめ

沢山の方法を載せましたが、Webサイトを作れば作るほど「この中央寄せの方法はここで使えるなぁ」と、使いどころがわかってくると思うのでとにかく使いまくってください。