このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。
要件
項目を別のボックスの縦横の中央に配置する。
レシピ
行った選択
あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには align-items を center に設定し、インライン軸（主軸）の中央に配置するには justify-content を center に設定します。
ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。
ブラウザー実装状況
さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。
align-items
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
| Supported in Flex Layout | Chrome
完全対応
52-
完全対応
52
-
部分対応
29
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
21
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Edge
完全対応
12-
完全対応
12
-
完全対応
12
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox
完全対応
20-
完全対応
20
- 補足 Multi-line flexbox has been supported since Firefox 28.
-
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
未対応
18 — 20
- 無効 From version 18 until version 20 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| IE
完全対応
11-
完全対応
11
- 補足 In Internet Explorer 10 and 11, if column flex items have
align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.
| Opera
完全対応
12.1 | Safari
完全対応
9-
完全対応
9
-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| WebView Android
完全対応
52-
完全対応
52
-
部分対応
4.4
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
≤37
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Chrome Android
完全対応
52-
完全対応
52
-
部分対応
29
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
25
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox Android
完全対応
20-
完全対応
20
- 補足 Multi-line flexbox has been supported since Firefox 28.
-
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
未対応
18 — 20
- 無効 From version 18 until version 20 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| Opera Android
完全対応
12.1 | Safari iOS
完全対応
9-
完全対応
9
-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Samsung Internet Android
完全対応
6.0-
完全対応
6.0
-
部分対応
2.0
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Samsung Internet 6.0.
-
完全対応
1.5
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
|---|
| Supported in Grid Layout | Chrome
完全対応
57 | Edge
完全対応
16 | Firefox
完全対応
52 | IE
未対応
なし | Opera
完全対応
44 | Safari
完全対応
10.1 | WebView Android
完全対応
57 | Chrome Android
完全対応
52 | Firefox Android
完全対応
52 | Opera Android
完全対応
43 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
6.2 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
justify-content
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
| Supported in Flex Layout | Chrome
完全対応
52-
完全対応
52
-
部分対応
29
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
21
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Edge
完全対応
12-
完全対応
12
-
完全対応
12
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox
完全対応
20-
完全対応
20
- 補足 Before Firefox 27, Firefox supported only single-line flexbox.
-
未対応
18 — 20
- 無効 From version 18 until version 20 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| IE
完全対応
11 | Opera
完全対応
12.1 | Safari
完全対応
9-
完全対応
9
-
完全対応
6.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| WebView Android
完全対応
52-
完全対応
52
-
部分対応
4.4
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
≤37
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Chrome Android
完全対応
52-
完全対応
52
-
部分対応
29
- 補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
-
完全対応
25
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox Android
完全対応
20-
完全対応
20
- 補足 Before Firefox 27, Firefox supported only single-line flexbox.
-
未対応
18 — 20
- 無効 From version 18 until version 20 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| Opera Android
完全対応
12.1 | Safari iOS
完全対応
9-
完全対応
9
-
完全対応
6.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Samsung Internet Android
完全対応
あり |
|---|
| Supported in Grid Layout | Chrome
完全対応
57 | Edge
完全対応
16 | Firefox
完全対応
52 | IE
未対応
なし | Opera
完全対応
44 | Safari
完全対応
10.1 | WebView Android
完全対応
57 | Chrome Android
完全対応
52 | Firefox Android
完全対応
52 | Opera Android
完全対応
43 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
6.2 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
MDN にある資料