CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する

ネタ元:[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス

これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。

次のようなHTMLがあったとして、

<div id="outer">
	<div id="inner"></div>
</div>

次のようにCSSを指定すると天地左右中央配置が可能です。

#outer{
	height:100%;
	display:-webkit-box;
	-webkit-box-pack : center;
	-webkit-box-align : center;
}
#inner{
	width:50%;
	height:40%;
	background: #CCC;
}

サンプル

このサンプルはひとまずwebkit系のブラウザに対応したバージョンです。

display:-webkit-box;でdisplayを変更して、-webkit-box-pack : center;で左右中央に、-webkit-box-align : center;で垂直中央に配置しています。

CSS3のFlexboxはカオスなプロパティの一つで仕様変更が頻繁にあり、上記のCSSに現在の仕様のものを追加すると以下のようになります。

#outer{
	height:100%;
	display:-webkit-box;
	-webkit-box-pack : center;
	-webkit-box-align : center;
	display:flex;
	justify-content : center;
	align-items : center;
}
#inner{
	width:50%;
	height:40%;
	background: #CCC;
}

display:box;はdisplay:flex;に、box-packはjustify-contentに、box-alignはalign-itemsに変更されているので利用する際は注意してください。(一部ブラウザは新プロパティ名もサポートしています。)

参考:FlexboxがLCに: プロパティ名などもろもろ変更 - fragmentary

関連エントリー

CSS3で実現するアローアイコン
CSS3アニメーションを利用したサンプル
CSS3でセレクトボックスをカスタマイズ
クロスフェードを実現するCSS4のcross-fade()
レスポンシブイメージを実現するCSS4のimage-set

スポンサードリンク

«これからフリーランスになる人へ | メイン | スマホでリンクを示す矢印アイコンの名称»