タイトルを次のように書き換えました: Flexbox を使用した要素の水平方向と垂直方向の中央揃え

Question

フレックスボックスを使用してコンテナ内で div を水平方向と垂直方向の中央に配置する方法。以下の例では、各数値を（行ごとに）下中央に配置したいと考えています。

.flex-container {
  パディング: 0;
  マージン: 0;
  リストスタイル: なし;
  ディスプレイ: フレックス;
  整列項目: 中央;
  コンテンツの位置揃え: 中央;
}
行 {
  幅: 100%;
}
.flex-item {
  背景: トマト。
  パディング: 5px;
  幅: 200ピクセル;
  高さ: 150ピクセル;
  マージン: 10px;
  行の高さ: 150px;
  色: 白;
  フォントの太さ: 太字;
  フォントサイズ: 3em;
  テキスト整列: 中央;
}

<div class="flex-container">
  <div class="行">
    <span class="flex-item">1</span>
  </div>
  <div class="行">
    <span class="flex-item">2</span>
  </div>
  <div class="行">
    <span class="flex-item">3</span>
  </div>
  <div class="行">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

Answer 1

Flexbox で要素を垂直方向および水平方向に中央揃えする方法

以下に、2 つの一般的なセンタリング ソリューションを示します。

1 つは垂直方向に整列したフレックス項目 (flex-direction: column) 用で、もう 1 つは水平方向に整列したフレックス項目 (flex-direction: row) 用です。

どちらの場合も、中央の div の高さは可変、未定義、不明、重要ではない可能性があります。

以下は両方の HTML コードです:

リーリー

---

CSS (装飾スタイルを除く)

フレックス項目が垂直方向に積み重ねられる場合:

リーリー ＃＃＃＃＃＃＃＃＃デモ＃＃＃＃＃＃＃＃＃

フレックス項目が水平方向に積み重ねられる場合:

上記のコードの

---

flex-direction

ルールを調整します。 リーリー ＃＃＃＃＃＃＃＃＃デモ＃＃＃＃＃＃＃＃＃

フレキシブルアイテムのコンテンツを中央に配置します

柔軟な書式設定コンテキスト

スコープは親子関係に限定されます。フレックス コンテナの子以降の子孫はフレックス レイアウトに参加せず、フレックス プロパティを無視します。基本的に、フレックス プロパティは子の外部に継承できません。

したがって、子要素に flex プロパティを適用するには、常に display: flex または display: inline-flex

を親要素に適用する必要があります。

---

テキストやその他のコンテンツを垂直方向および/または水平方向に中央揃えにするには、アイテムを (ネストされた) フレックス コンテナーにして、中央揃えルールを繰り返します。

リーリー

詳細については、次を参照してください。 フレックスボックスでテキストを垂直方向に配置するにはどうすればよいですか?

あるいは、margin: auto をフレックス項目のコンテンツ要素に適用することもできます。 リーリー フレックス

自動

マージンの詳細については、こちらをご覧ください:

フレックス項目を整列させる方法

(ボックス #56 を参照)。

中央に配置された複数行の柔軟な項目

フレックス コンテナーに複数の行がある場合 (改行により)、軸をまたがる位置合わせには align-content

プロパティが重要になります。

仕様より:

詳細については、次を参照してください。

---

flex-wrap は、align-self、align-items、および align-content とどのように連携しますか?

ブラウザのサポート

Flexbox は、

IE <10 を除くすべての主要なブラウザでサポートされています。 Safari 8 や IE10 などの一部の最近のブラウザ バージョンでは、 ベンダー プレフィックス

が必要です。プレフィックスをすばやく追加するには、

Autoprefixer を使用します。詳細については、この回答

を参照してください。

---

古いブラウザ向けのセンタリング ソリューション

CSS テーブルと配置プロパティを使用した代替のセンタリング ソリューションについては、この回答を参照してください: https://stackoverflow.com/a/31977476/3597276

Answer 2

あなたが望んでいることは次のとおりだと思います。

リーリー リーリー