position: absolute な要素を縦横中央揃えにする

CSSで「position: absolute;」指定された要素を縦横中央揃えするのに、こんなやり方があると知ってちょっと感動。


<html>
<head>
  <meta http-equiv="Content-Language" content="ja" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>[SAMPLE] absolute の要素を縦横中央揃え</title>

  <style>
  .outer {
    width: 100%;
    height: 100%;
    background: #ccc;
    position: relative;
  }
  .inner {
    width: 30px;
    height: 30px;
    background: #000;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>


marginをautoにしたうえでtopとbottom、rightとleftを共に0指定してセンタリングさせるというもの。相反するtopとbottom、rightとleftの同時指定が出来るとは知らなんだ…。

大岡越前の「子争い」の話し(産みの親と育ての親に子供の手を引っ張らせるというアレ)を思い起こさせる手法(笑)ですが、JavaScriptで当該要素と親の要素の幅・高さを取得・計算して「top」「left」をセットやり方より遥かにスマートです。

ブロック要素には使えないvertical-align: middleの代わりとしても活用できそうですね。

    この記事へのコメント

    メールアドレスが公開されることはありません。

    頂戴したコメントは管理者に承認されるまで表示されません。