フレックスボックス：水平および垂直に中央揃え

フレックスボックスを使用して、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

次のようなものが欲しいと思います。

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要素は、（ブロックレベルでなければなりませんdiv代わりに、spanあなたが適切に動作する高さと、トップ/ボトムのパディングをしたい場合）。

また、では.row、幅をのauto代わりにに設定し100%ます。

あなたの.flex-containerプロパティは大丈夫です。

を.rowビューポートの垂直方向の中央に配置する場合は、htmlおよびに100％の高さを割り当てbody、bodyマージンもゼロにします。

.flex-containerは垂直方向の配置効果を表示するために高さが必要であることに注意してください。そうでない場合、コンテナはコンテンツを囲むために必要な最小の高さを計算します。これは、この例ではビューポートの高さよりも低くなっています。

脚注：、、プロパティは実装が、このデザインは簡単に作ることができます。要素（背景画像、境界線など）の周りにスタイルを追加する必要がない限り、コンテナーは必要ないと思います。
flex-flowflex-directionflex-wrap.row

役立つリソースは次のとおりです。http：//demo.agektmr.com/flexbox/

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

以下は、2つの一般的なセンタリングソリューションです。

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

どちらの場合でも、中央に配置されたdivの高さは、可変、未定義、不明など、さまざまです。中央のdivの高さは関係ありません。

両方のHTMLは次のとおりです。

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <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 */
}

デモ

フレックスアイテムが水平に積み重ねられている場合：

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;
}

デモ

フレックスアイテムのコンテンツの中央揃え

フレックスフォーマットコンテキストの範囲は、親子関係に制限されています。子を超えたフレックスコンテナの子孫はフレックスレイアウトに参加せず、フレックスプロパティを無視します。基本的に、フレックスプロパティは子を超えて継承できません。

したがって、フレックスプロパティを子に適用するには、常に、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 */
}

詳細はこちら：フレックスボックス内のテキストを垂直方向に配置する方法は？

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

p { margin: auto; }

フレックスautoマージンについては、こちらをご覧ください：フレックスアイテムの整列方法（box＃56を参照）。

フレックスアイテムの複数行の中央揃え

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

スペックから：

8.4。フレックスラインのパッキング：align-content プロパティ

align-contentフレックスコンテナ内のフレックスコンテナのライン整列プロパティは、いつどのように似たクロス軸に余分なスペースがあり、justify-contentメイン軸内に整列する個々の項目。 このプロパティは、単一行のフレックスコンテナーには影響しません。

詳細はこちら：flex-wrapはalign-self、align-items、align-contentとどのように連携しますか？

ブラウザのサポート

Flexboxは、IE <10を除くすべての主要なブラウザーでサポートされています。Safari 8やIE10などの一部の最近のブラウザーバージョンでは、ベンダープレフィックスが必要です。接頭辞をすばやく追加するには、Autoprefixerを使用します。この回答の詳細。

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

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

追加

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

あなたが中央に置きたいもののコンテナ要素に。ドキュメント： justify-contentおよび align-items。

重要なブラウザ固有の属性を使用することを忘れないでください：

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;

flexをよりよく理解するために、この2つのリンクを読むことができます：http : //css-tricks.com/almanac/properties/j/justify-content/ および http://ptb2.me/flexbox/

幸運を。

1-親divのCSSを display: flex;

2-親divのCSSを設定します。これにより、div内のすべてのコンテンツが上から下に配置されることに注意してflex-direction: column;
ください。これは、親divが子のみを含み、他には何も含まない場合に最適に機能します。

3-親divのCSSを justify-content: center;

CSSの例は次のとおりです。

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

あなたは利用することができます

display: flex; align-items: center; justify-content: center;

親コンポーネント

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;それはコンテナでありmargin:auto;、そのアイテムは完璧に機能します。

注：あなたがセットアップする必要がありますwidthし、height効果を確認します。

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

テキストをリンクの中央に配置する必要がある場合、これでうまくいきます：

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

margin: autoフレックスボックスで完璧に動作します。垂直方向と水平方向に集中します。

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="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>  
</div>
</body>
</html>

結果：

コード

HTML：

<div class="flex-container">
  <div class="rows">

    <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>  
</div>

CSS：

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

ここで、flex-containerdivはdivを垂直方向および水平方向に中央揃えするために使用されrows、rowsdivは「アイテム」をグループ化し、列ベースの項目でそれらを順序付けるために使用されます。

    .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;
}

CSS +の使用

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

見てみましょうHERE