851

フレックスボックスを使用してコンテナ内で 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

4

14 に答える 14

308

フレックスボックスで要素を垂直方向および水平方向に中央揃えにする方法

以下は、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: flexorを適用する必要があります。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フレックスマージンについては、フレックス アイテムの配置方法(ボックス 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 の回答を参照してください。

于 2015-10-10T01:06:34.317 に答える
16

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

于 2018-02-25T22:05:41.637 に答える
12

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>

于 2018-11-13T02:27:54.623 に答える