フレックスボックス：水平方向と垂直方向の中央配置

フレックスボックスを使用して、コンテナ内でdivを水平方向および垂直方向にセンタリングする方法。以下の例では、それぞれの数字を下に（列に）並べ、それを水平方向に中央に配置しています。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

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

Michael_B
編集された質問 22日 10月 2016 в 9:38
プログラミング
html5 css3 html css flexbox
26日 9月 2013 в 11:22
15 ビュー
ソリューション

以下のようなものがいいのではないでしょうか。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

デモはこちら： http://jsfiddle.net/audetwebdesign/tFscL/

高さや上下のパディングを正しく動作させたい場合は、.flex-item 要素をブロックレベル（spanではなくdiv）にする必要があります。

また、.row の幅を 100% ではなく auto に設定してください。

.flex-container` のプロパティは問題ありません。

.rowをビューポートの中央に配置したい場合は、htmlとbodyに 100% の高さを割り当て、body` の余白をゼロにします。

そうしないと、コンテナはコンテンツを囲むために必要な最小の高さを計算し、この例ではビューポートの高さよりも低くなります。

脚注：。 flex-flow,flex-direction,flex-wrapプロパティがあれば、このデザインを簡単に実装できたかもしれません。.rowコンテナは、要素の周りに何らかのスタイル（背景画像やボーダーなど）を追加したい場合を除き、必要ないと思います。

役に立つ情報源は、http://demo.agektmr.com/flexbox/ です。

nalzok
編集した答え 26日 10月 2016 в 9:34
解説 (8)

Flexboxで要素を垂直・水平にセンタリングする方法

一般的なセンタリング方法を2つ紹介します。

1 つは垂直方向に整列したフレックスアイテム（flex-direction: column）用で、もう 1 つは水平方向に整列したフレックスアイテム（flex-direction: row）用です。

どちらの場合も、中心となるdivの高さは可変、未定義、不明など、何でも構いません。中心となるdivの高さは重要ではありません。

以下は両方のHTMLです。

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS（装飾スタイルを除く

*フレックスアイテムを垂直方向に重ねた場合

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

のようになります。

[DEMO](http://jsfiddle.net/8o29y7pd/)

フレックスアイテムを横方向に重ねた場合：。

上記のコードから、flex-directionルールを調整します。

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

を参照してください。

[DEMO](http://jsfiddle.net/8o29y7pd/3/)

フレックスアイテムのコンテンツを中央に配置する

flex formatting contextの範囲は、親子関係に限定されます。子より先のフレックスコンテナの子孫は、フレックスレイアウトに参加せず、フレックスプロパティも無視されます。基本的に、フレックスのプロパティは子より先には継承されません。

したがって、子要素にフレックスプロパティを適用するには、常に親要素に display: flex または display: inline-flex を適用する必要があります。

フレックスアイテムに含まれるテキストやその他のコンテンツを垂直方向や水平方向にセンタリングするには、アイテムを(ネストした)フレックスコンテナにして、センタリングのルールを繰り返します。

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

詳細はこちら： https://stackoverflow.com/q/25311541/3597276

また、フレックスアイテムのコンテンツ要素にmargin: autoを適用することもできます。

p { margin: auto; }

フレックスの auto マージンについてはこちらをご覧ください。Methods for Aligning Flex Items (see box#56)をご覧ください。

複数行のフレックスアイテムのセンタリング

フレックスコンテナに複数の行がある場合（折り返しがあるため）、交差軸の配置には align-content プロパティが必要になります。

仕様書より:

8.4.8.4. フレックスラインのパッキング: align-content プロパティ

align-content プロパティは、フレックスコンテナの線を、横軸に余分なスペースがある場合に、フレックスコンテナ内で整列させます。 align-contentプロパティは、justify-contentプロパティと同じように、フレックスコンテナの横軸に余分なスペースがある場合に、フレックスコンテナ内の行を揃えます。 align-contentプロパティは、justify-contentが主軸内の個々のアイテムを整列させるのと同様です。 *このプロパティは、1行のフレックスコンテナには影響しません。

詳細はこちら： https://stackoverflow.com/q/42613359/3597276

対応ブラウザ

フレックスボックスは、[IE < 10を除く]すべての主要ブラウザでサポートされています(http://caniuse.com/#search=flex)。Safari 8やIE10のような最近のブラウザのバージョンでは、[ベンダープレフィックス]を必要とするものがあります(https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)。手っ取り早くプレフィックスを追加するには、[Autoprefixer](https://autoprefixer.github.io/)をご利用ください。詳しくは[この回答]( https://stackoverflow.com/a/35137869/3597276 )をご覧ください。

古いブラウザでのセンタリング対策

CSSのtableとpositionのプロパティを使った別のセンタリング方法については、こちらの回答をご覧ください： https://stackoverflow.com/a/31977476/3597276

Michael_B
編集した答え 3日 9月 2017 в 11:07
解説 (5)

重要なブラウザ固有の属性を使用することを忘れてはいけません。

align-items: center; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: center; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

この2つのリンクを読めば、フレックスへの理解が深まるでしょう。 http://css-tricks.com/almanac/properties/j/justify-content/ と http://ptb2.me/flexbox/

がんばってください。

解説 (6)