2016年10月アーカイブ

縦中央に揃える最新の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以下が減ってきたことでようやく実用的になってきたのかな、と思います。

このアーカイブについて

このページには、2016年10月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2016年8月です。

次のアーカイブは2017年5月です。

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