web-dev-qa-db-ja.com

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

Flexboxを使用して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

htmlcsshtml5css3flexbox
529
bsr

私はあなたが以下のようなものが欲しいと思います。

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では、幅を100%ではなくautoに設定します。

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

.rowをビューポートの垂直方向の中央に配置する場合は、htmlとbodyに100％の高さを割り当て、さらにbodyの余白をゼロにします。

.flex-containerは垂直方向の配置効果を見るために高さを必要とします。そうでなければ、コンテナーはコンテンツを囲むのに必要な最小の高さを計算します。これはこの例ではビューポートの高さよりも小さいです。

脚注：
flex-flow、flex-direction、flex-wrapプロパティにより、このデザインの実装が容易になりました。 .rowコンテナは、要素（背景画像、枠線など）の周りに何らかのスタイルを追加しない限り、必要ないと思います。

便利なリソースは次のとおりです。 http://demo.agektmr.com/flexbox/

600
Marc Audet

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 */
}

enter image description here

デモ

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

上記のコードから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;
}

enter image description here

デモ

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

フレックス書式設定コンテキスト の範囲は、親子関係に限定されます。子を超えたフレックスコンテナの子孫はフレックスレイアウトに参加せず、フレックスプロパティを無視します。基本的に、flexプロパティは子供たち以外には継承できません。

したがって、flexプロパティを子に適用するには、常に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; }

Flexのautoの余白については、こちらをご覧ください： Flexアイテムの整列方法 （ボックス＃56参照）。

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

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

仕様から：

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

align-contentプロパティは、justify-contentがメイン軸内の個々の項目を揃えるのと同様に、クロス軸に余分なスペースがあるときにフレックスコンテナ内のフレックスコンテナの行を揃えます。 注：このプロパティは単一行のFlexコンテナには影響しません。

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

ブラウザサポート

Flexboxはすべての主要なブラウザ IE <1 をサポートしています。 Safari 8やIE 10など、最近のブラウザのバージョンには、 vendor prefixes が必要なものがあります。簡単にプレフィックスを追加するには Autoprefixer を使います。詳しくは この回答 をご覧ください。

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

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

216
Michael_B

追加する

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

あなたが中心にしたいものは何でものコンテナ要素に。ドキュメンテーション： 両端揃え と align-items .

30
ben

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

整列項目：中央。 - >

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: 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/

がんばろう。

25
QMaster
display: flex;
align-items: center;
justify-content: center;
23
Asiya Fatima

1 - 親divのCSSをdisplay: flex;に設定

2 - 親divのCSSをflex-direction: column;に設定
これにより、そのdiv内のすべてのコンテンツが上から下に並ぶようになります。これは、親のdivに子しか含まれておらず、それ以外のものが含まれていない場合に最適に機能します。

3 - 親divのCSSをjustify-content: center;に設定する

これがCSSの外観の例です。

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

コンテナの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>
6
Polar

テキストをリンクの中央に配置する必要がある場合は、次のようにします。

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>
3
Leo

margin: autoはflexboxと完璧に連携します。それは縦と横に集中する。

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>
3
Aksana Tolstoguzova