blob: c813da5cbeb1687b5f0ab5cff9396a1a45d5578e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
title: 要素を中央に配置
slug: Web/CSS/Layout_cookbook/Center_an_element
tags:
- CSS
- Layout
- Recipe
- box alignment
- centering
- cookbook
- flexbox
translation_of: Web/CSS/Layout_cookbook/Center_an_element
---
<div>{{CSSRef}}</div>
<p class="summary">このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。</p>
<p><img alt="大きなボックスの中央に配置された要素" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
<h2 id="Requirements" name="Requirements">要件</h2>
<p>項目を別のボックスの縦横の中央に配置する。</p>
<h2 id="Recipe" name="Recipe">レシピ</h2>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
<div class="note">
<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">この例をダウンロードする</a></p>
</div>
<h2 id="Choices_made" name="Choices_made">行った選択</h2>
<p>あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を <code>center</code> に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を <code>center</code> に設定します。</p>
<p>ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<h4 id="align-items" name="align-items">align-items</h4>
<p>{{Compat("css.properties.align-items")}}</p>
<h4 id="justify-content" name="justify-content">justify-content</h4>
<p>{{Compat("css.properties.justify-content")}}</p>
<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置のガイド</a></li>
</ul>
|
