CSSで上下左右中央寄せ

CSSで上下左右中央寄せ

センタリングは簡単。幅を指定したフローコンテンツ要素なら、例えば margin: 0 auto; で親要素に対して左右中央に揃います。

でも上下左右中央に揃えようと margin: auto; とかしても、うまくいかない。わかってしまえば簡単ですけどね。

サンプルコード

<!-- HTML -->
<div id="sample">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio cumque magni minus voluptas neque id, autem voluptatum! Provident maiores doloribus aut tempore at sapiente temporibus, optio laborum repellendus perferendis eveniet.</p>
  <div><p>50%</p></div>
</div>
/* CSS */
    #sample{
      position: relative;
      background: gray;
    }
    #sample div{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 50%;
      height: 50%;
      background: lime;
    }

サンプルDEMO

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio cumque magni minus voluptas neque id, autem voluptatum! Provident maiores doloribus aut tempore at sapiente temporibus, optio laborum repellendus perferendis eveniet.

50%

DEMO の試し方

上の DEMO では、グレー四角形の右下角をドラッグしてサイズ変更できます。ライム四角形は常に、親要素であるグレー四角形の中心(上下左右中央)に位置します。

ライム四角形の幅と高さは50%に指定しています。相対値(%)にすることで、親要素のサイズ変更に追従させることができます。この手法は、さまざまな表示領域サイズに対応する、レスポンシブデザインに有効です。

なお、DEMO ではサイズを変更して変化を確認できるように、親要素にサンプルコードにはない resize プロパティを指定しています。IE、Edge、iOS Safari をお使いの方は、執筆時点では残念ながら reseize プロパティが実装されていないため、ドラッグではサイズ変更できません。ブラウザのウインドウ幅を動かしたり、デバイスを横向きにして画面を回転させて、表示の変化をご確認いただけます。

コード解説

CSS サンプルソースの7〜12行目で、親要素である #sample に対してフローコンテンツ要素 div を上下左右中央寄せしています。

/* CSS L7-11 */

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

上下左右中央寄せしたい要素を絶対配置にします。絶対配置の基準とする親要素の配置も、デフォルト値の static から変更して、相対配置にしています。

上下左右の位置は、デフォルト値の auto から変更して、0 を指定しています。

/* CSS L12 */

      margin: auto;

そして、上下左右の margin をすべて auto に指定することで、上下も左右も中央に寄せることができます。

ちなみに、left と right がデフォルト値の auto のままだと、文章の方向を指定する direction のデフォルト値 ltr(Left to Right)にしたがって、左寄せになります。

おわりに

margin の仕様は意外と奥が深いです。そういえば少し前まで、table-cell にするとか気持ち悪い方法もありましたね。

実のところ4年も前に話題になったネタですけど、これからも今更感満載でお送りいたします。