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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language