Flexboxを使用したCSSでのセンタリング

ページ上の要素の中央揃え、特に垂直方向の中央揃えは、これまでCSSで行うのが難しいことで有名であり、多くのハックを解決する必要がありました。ありがたいことに、 Flexbox を使用するとすべてが簡単になり、代わりに設計エネルギーをより高いレベルの問題に集中させることができます。

以下は、Flexboxを使用した要素のセンタリングに関する非常に簡単なガイドです。

水平方向のセンタリング

div から始めましょう。この段落には、同じ軸を水平に中心に配置する2つの段落が含まれています。コンテナでjustify-contentプロパティをcenterの値で使用するのと同じくらい簡単です。

arrr！

ええ！

<div class="box flex">
  <p>
    <img src="/images/pirate.svg" width="75">
    arrr!
  </p>
  <p>
    <img src="/images/cowboy.svg" width="75">
    yeehaw!
  </p>
</div>

.box.flex {
  display: flex;
  justify-content: center;
}

.box {
  padding: .5rem;
  height: 300px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;

  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}

.box p {
  max-width: 125px;
  text-align: center;
  background: rgba(255,255,255,0.5);
  margin: .25rem;
  padding: .25rem;
}

垂直方向のセンタリング

Flexboxのパワーは、要素を垂直方向に中央揃えする必要がある場合にも非常に役立ちます。これが私たちの例ですが、フレックスアイテムも垂直方向に中央に配置されています。

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

arrr！

ええ！

特定のフレックスアイテムを垂直方向の中央に配置するだけの場合は、代わりにアイテムにalign-selfを設定できます。

.flex p:last-child {
  align-self: center;
}

arrr！

ええ！

ページ全体の垂直方向の中央揃え

ページの真ん中に要素を配置する場合、フレックスアイテムはコンテナの高さに応じて垂直方向にのみ中央に配置されるため、少し注意が必要です。つまり、コンテナ自体はページ自体と同じ高さである必要があります。これは簡単です。ビューポートユニットを使用すると、100vhはビューポートの高さの100% ofになります。

簡単な例を次に示します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dead center!</title>
    <style>
      body {
        margin: 0;
      }

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

        height: 100vh;
      }
    </style>
  </head>
  <body>

    <div class="center-me">
      <p>😇 Bonjour center!</p>
    </div>

  </body>
</html>

また、ページの余白を必ず0にリセットすることにも注意してください。そうしないと、少しスクロールしてしまうことになります。