CSS: Absolute で上下左右の中央配置

久しぶりに、CSS の Absolute で縦横中央配置するときに少々手こずってしまったのでメモしておきます。

目次

  • Absolute 中央配置
  • まとめ

Absolute 中央配置

外側の div (wrapper) と、中央配置したい div (inner) を用意します。

HTML

<div class="wrapper">
  <div class="inner"></div>
</div>

外側の div (wrapper) に position: relative と縦横サイズ、中央配置したい div (inner) に position: absolute にし、top, left, right, bottom プロパティに同一の値(ここでは 0)を指定し、margin: auto にします。

CSS

.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;
}

結果

wrapper クラスの div(薄いグレー)の中の inner クラスの div(濃いグレー) が上下左右中央に配置されました。

まとめ

absolute のような決め打ちのスタイルはあまり使いたくはないのですが、どうしても使用を避けられない場面もあるかと思います。
flex でも同様のことが実現できますが、モダンブラウザでの互換性を考慮する場合、ある程度使える方法なのではないでしょうか。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents