mousse design lab. ムースデザインラボ

CSSたった3行でスタイルシートで天地の中央に配置!


上下中央に配置しなきゃいけないこと、結構多いですよね。まして要素の高さが可変だったりするとまた色々と大変で・・・
そこでIE9にも対応した、3行のスタイルシートで画像でもテキストでも上下中央に配置するテクニックを紹介します。

<div class="demo">
<p>天地の中央に配置</p>
</div>
.demo p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

なんとこれだけ!positionをrelativeにし、topから50%に配置し、さらにtransformで自身の高さの50%を上方向に移動させて配置します。%で配置するので、容器も要素も高さ不明で天地中央に配置できます。
コリスさんの記事を参考にさせていただきました!いつもお世話になってます!

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

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

Top