CSS

CSS|縦に中央寄せしたい。

ここでは、テキストやボックスを縦に中央寄せする代表的な3つの方法をご紹介します。
縦の中央が効かなくて困っている方はぜひ参考にしてください。

1.「height=line-height」で1行を真ん中に

これは見出しなどテキストが1行であることが確定している場合に使う方法です。

ボタンで表示を切り替えてご覧ください。

See the Pen middle01 by ken (@ken81) on CodePen.

h1{
  height:100px;
  line-height:100px;
}

こんな形で要素の高さと行間を同じ値にしてあげるとテキストが中央に寄ります。これは必ず1行で収まる場合のみですので、スマホ表示などでテキストが折り返してしまう場合は次の方法を試してください。

複数行あるテキストを縦に中央寄せ

テキストが複数行になる場合は、display:table-cell;vertical-align:middle;を一緒に指定します。

See the Pen middle02 by ken (@ken81) on CodePen.

.box{
  display:table-cell;
  vertical-align: middle;
}

セレクタとして指定するのは、中央に寄せたい要素の親要素になります。vertical-align:middle;を使った縦の中央寄せは、ブロック要素には効きませんのでdisplay:table-cell;を指定する必要があります。vertical-aligntext-alignに似ているので、値をcenterにしてしまいそうになりますが、middleである点に気をつけましょう。

Flexboxを使った中央寄せ

See the Pen middle03 by ken (@ken81) on CodePen.

.box{
  display:flex;
  align-items:center;
}

flexはCSS3から導入された方法です。先ほどのvertical-align: middle;のやり方と似ていて手間も変わらないように見えますが、こちらの方が応用がかなり効くのでこちらを覚えていただくのがベストだと思います。

例えば、左右にも中央寄せしたい場合は、justify-content:center;を追加するだけでできます。

See the Pen middle04 by ken (@ken81) on CodePen.

Flexboxについては、下記の記事でも詳しくお話していますので、良かったら参考にしてみてください。

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP