2021/08/13 時点の英語版に同期

1 files changed, 29 insertions, 34 deletions

diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.md b/files/ja/web/css/layout_cookbook/center_an_element/index.md
index c813da5cbe..e5036a8628 100644
--- a/files/ja/web/css/layout_cookbook/center_an_element/index.md
+++ b/files/ja/web/css/layout_cookbook/center_an_element/index.md
@@ -3,57 +3,52 @@ 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>
+{{CSSRef}}
 
-<p class="summary">このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。</p>
+このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方の中央に配置することは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。
 
-<p><img alt="大きなボックスの中央に配置された要素" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+![大きなボックスの中央に配置された要素](cookbook-center.png)
 
-<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>
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-<div class="note">
-<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">この例をダウンロードする</a></p>
-</div>
+> **Callout:**
+>
+> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html)
 
-<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+## 行った選択
 
-<p>あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を <code>center</code> に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を <code>center</code> に設定します。</p>
+あるボックスを別のボックスの中央に配置するには、コンテナーをフレックスコンテナーにします。 次に、ブロック軸の中央に配置するために {{cssxref("align-items")}} を `center` に設定し、インライン軸の中央に配置するために {{cssxref("justify-content")}} を `center` に設定します。
 
-<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>
+#### align-items
 
-<h4 id="align-items" name="align-items">align-items</h4>
+{{Compat("css.properties.align-items")}}
 
-<p>{{Compat("css.properties.align-items")}}</p>
+#### justify-content
 
-<h4 id="justify-content" name="justify-content">justify-content</h4>
+{{Compat("css.properties.justify-content")}}
 
-<p>{{Compat("css.properties.justify-content")}}</p>
+## MDN の関連資料
 
-<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>
+- [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [CSS ボックス配置のガイド](/ja/docs/Web/CSS/CSS_Box_Alignment)