Flexbox:水平方向と垂直方向の中央に配置

738
bsr 2013-09-27 01:22.

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

11 answers

802
Marc Audet 2013-09-27 02:13.

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

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には、ビューポート内に垂直割り当て100%の高さを中心にすることhtmlbody、またゼロアウトbodyの余白。

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

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

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

277
Michael Benjamin 2015-10-10 15:06.

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

デモ


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

フレックスフォーマットコンテキストの範囲は、親子関係に限定されています。子以外のフレックスコンテナの子孫はフレックスレイアウトに参加せず、フレックスプロパティを無視します。基本的に、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; }

フレックス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

46
ben 2017-04-13 03:06.

追加

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

中央に配置したいもののコンテナ要素に。ドキュメント: justify-contentalign-items

29
QMaster 2014-06-15 02:02.

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

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/

幸運を。

17
MelanieP 2018-02-26 12:05.

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

15
Vikas Gupta 2019-09-25 19:20.

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

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

親コンポーネント

https://repl.it/repls/TomatoImaginaryInitialization

8
Polar 2018-11-13 16:27.

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

注:効果を確認するには、widthheightを設定する必要があります。

#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>

5
Aksana Tolstoguzova 2017-04-21 08:52.

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>

3
Leo 2017-03-05 07:47.

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

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>

2
Wilson 2019-12-07 03:35.

結果:

コード

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を垂直方向と水平方向に中央揃えするために使用されrowsrowsdivは「アイテム」をグループ化して列ベースのアイテムに並べ替えるために使用されます。

0
Carpiee 2020-03-23 05:37.

これがお役に立てば幸いです。

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

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language