久しぶりに、CSS の Absolute で縦横中央配置するときに少々手こずってしまったのでメモしておきます。
目次
- Absolute 中央配置
- まとめ
Absolute 中央配置
外側の div (wrapper) と、中央配置したい div (inner) を用意します。
HTML
[code]
[/code]
外側の div (wrapper) に position: relative と縦横サイズ、中央配置したい div (inner) に position: absolute にし、top, left, right, bottom プロパティに同一の値（ここでは 0）を指定し、margin: auto にします。
CSS
[code]
.wrapper {
position: relative;
width: 300px;
height: 300px;
background:#CCC;
}
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background:#AAA;
}
[/code]
結果
wrapper クラスの div（薄いグレー）の中の inner クラスの div（濃いグレー） が上下左右中央に配置されました。
まとめ
absolute のような決め打ちのスタイルはあまり使いたくはないのですが、どうしても使用を避けられない場面もあるかと思います。
flex でも同様のことが実現できますが、モダンブラウザでの互換性を考慮する場合、ある程度使える方法なのではないでしょうか。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
