［HTML］ 縦方向の中央に配置する方法

縦方向の中央に配置する時に今までは「table-cell」を使用していましたけ、もっと簡単な方法を書かれている方がいらっしゃいましたので、今後のために記録しておきます。

[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

1 DEMO
2 html
3 css

DEMO

Sample Text

html

    <div class="demo">
        <p>Sample Text</p>
    </div>

css

    .demo {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .demo p {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

「position」は最近まで、あまり好きなれなかったのですが、このような使い方が出来るのなら、今後はもっと積極的に利用していきたいと思います。