縦中央に揃える最新のCSS

| コメント(0)
これまでいろいろな方法で実装してきましたが、どれもそれなりに手間が掛かってしまっていた縦中央揃え。古いブラウザに対応しなくてよい場合のとても簡単な方法が紹介されていました。


タイトルにある通りIE9以上で使え、親と子どちらの高さも指定する必要なし。CSSの記述も簡潔です。


■HTML

<div class="sample">
<p>天地の中央に配置</p>
</div>


■CSS

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


ベンダープレフィックスはつけておきます。

transform が使えなかった頃は子要素の高さの半分を数値で入れる必要がありましたが、IE8以下が減ってきたことでようやく実用的になってきたのかな、と思います。

コメントする

このブログ記事について

このページは、gravity-worksが2016年10月25日 18:00に書いたブログ記事です。

ひとつ前のブログ記事は「iPhoneで画面を回転させたときに文字サイズが変わる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。