heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。Unknown[ad#ad-2]下記は各ポイントを意訳したものです。「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。-100px;}これは簡単なテクニックです。「真ん中に配置するエレメント」と「その親エレメント」のサイズが分からない場合はどうしたらよいでしょうか。乱暴な方法ですが、tableを使うことで実現することは可能です。</tr></table>しかし、レイアウトのためにtableを使う方法はセマンティックではありません。「真ん中に配置するエレメント」と「その親エレメント」をdiv要素で実装してみます。</div></div>div要素で実装しても、tableで実装したような結果を得ることができます。middle;}CSSでのtable化は人によっては目からウロコかもしれませんが、ここではこの方法は使わずに、エレメントを真ん中に配置する方法を紹介しましょう。middle;」で真ん中に配置します。ゴーストとなるエレメントは実体が必要ないので、擬似要素で実装します。300px;}まとめと対応ブラウザこの擬似要素を使ったテクニックの考え方は、tableを使ったものと同じです。対応ブラウザは擬似要素を使っているため、IE8+です。IE7では擬似要素のサポートもCSSのtable化もサポートしていません。IE7以下の対応が必要であれば、ゴーストとなるエレメントに「空のspan要素」を使用します。これは新しいアプローチではありません。「空のspan要素」を使ったテクニックは5年前に公開されています。Posts関連記事が見つかりませんでした。