サンプル コード

<!--  HTML  -->
<div id="sample">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum saepe ipsum doloremque dolorem tempore, nemo vel consequuntur adipisci! Ex ad vitae eum. Porro beatae enim distinctio, assumenda quam nulla nihil!</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 の試し方

上の 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年も前に話題になったネタですけど、これからも今更感満載でお送りいたします。