CSSでパーセント指定の要素を天地左右中央に表示する方法

CSSでパーセント指定された要素を天地左右中央に表示する方法を紹介します。

幅や高さが決まっている要素ならば簡単に配置できますが、最近はレスポンシブ対応のため、幅や高さが決まっていない要素を上下中央に配置することが増えてきました。

今回はCSSで「transform: translate(-50%, -50%);」を使って幅や高さが決まっていない要素を上下中央表示する方法を紹介します。

スクリーンショット 2016-01-31 14.00.58
Centering Percentage Width/Height Elements | CSS-Tricks

スポンサーリンク

天地中央に表示する方法

デモページを用意しました。

スクリーンショット 2016-01-31 14.05.13

HTMLを用意します。赤い箱のdiv(class=”container”)を天地中央に表示して、その中のテキストが入ったdiv(class=”descrpition”)も天地中央に表示します。

CSSはこんな感じです。

ポイントはtransformでネガティブマージンを指定することです。

ちなみに、単純なネガティブマージンでは動作しません。

スポンサーリンク

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.01.31
  • Views 357