CSSグリッドの中央揃え

179

CSSグリッドでシンプルなページを作成しようとしています。

私が失敗しているのは、HTMLのテキストをそれぞれのグリッドセルの中央に配置することです。

およびセレクターのdiv内側と外側の両方に別々のにコンテンツを配置して、CSSプロパティのいくつかを試してみましたが、役に立ちませんでした。left_bgright_bg

どうすればよいですか？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

スニペットを展開

— ビートルート
ソース

リンクw3.org/Style/Examples/007/center.en.htmlを確認してください。役立つことを願っています。

— アリ

回答:

433

この回答には2つの主要なセクションがあります。

CSSグリッドでの配置の仕組みを理解する。
CSSグリッドでセンタリングするための6つの方法。

ソリューションのみに関心がある場合は、最初のセクションをスキップしてください。

グリッドレイアウトの構造と範囲

グリッドコンテナーでのセンタリングの仕組みを完全に理解するには、グリッドレイアウトの構造とスコープを最初に理解することが重要です。

グリッドコンテナーのHTML 構造には3つのレベルがあります。

コンテナ
アイテム
コンテンツ

これらの各レベルは、グリッドプロパティの適用に関して、他のレベルから独立しています。

グリッドコンテナーのスコープは、親子関係に限定されます。

つまり、グリッドコンテナーは常に親であり、グリッドアイテムは常に子です。グリッドプロパティは、この関係内でのみ機能します。

子を超えたグリッドコンテナーの子孫はグリッドレイアウトの一部ではなく、グリッドプロパティを受け入れません。（少なくともsubgrid、グリッド項目の子孫がプライマリコンテナーのラインを尊重できるようにする機能が実装されるまでは。）

上記の構造とスコープの概念の例を次に示します。

三目並べのようなグリッドを想像してみてください。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

XとOを各セルの中央に配置します。

したがって、コンテナレベルでセンタリングを適用します。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

ただし、グリッドレイアウトの構造と範囲のためjustify-items、コンテナーでは、コンテンツではなくグリッドアイテムが（少なくとも直接ではなく）中央に配置されます。

コードスニペットを表示

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

スニペットを展開

同じ問題align-items：コンテンツが副産物として中央に配置される可能性がありますが、レイアウト設計が失われています。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

コードスニペットを表示

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

スニペットを展開

コンテンツを中央に配置するには、別のアプローチをとる必要があります。グリッドレイアウトの構造とスコープを再び参照すると、グリッドアイテムを親として、コンテンツを子として扱う必要があります。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

コードスニペットを表示

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

スニペットを展開

jsFiddleデモ

CSSグリッドでセンタリングするための6つの方法

グリッドアイテムとそのコンテンツを中央に配置する方法は複数あります。

基本的な2x2グリッドは次のとおりです。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

フレックスボックス

グリッドアイテムのコンテンツを中央に配置するシンプルで簡単な方法として、フレックスボックスを使用します。

具体的には、グリッド項目をフレックスコンテナーにします。

このメソッドには、競合、仕様違反、またはその他の問題はありません。クリーンで有効です。

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

詳細な説明については、この投稿を参照してください。

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

グリッドレイアウト

フレックスアイテムもフレックスコンテナーになることができるのと同じように、グリッドアイテムもグリッドコンテナーにすることができます。このソリューションは、中央揃えがフレックスではなくグリッドプロパティで行われることを除いて、上記のフレックスボックスソリューションに似ています。

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

`auto` マージン

margin: autoグリッド項目を垂直方向および水平方向に中央揃えするために使用します。

grid-item {
  margin: auto;
}

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

グリッドアイテムのコンテンツを中央に配置するには、アイテムをグリッド（またはフレックス）コンテナーにして、匿名アイテムを独自の要素でラップし（CSSで直接ターゲットにできないため）、新しい要素にマージンを適用します。

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

ボックスの配置プロパティ

以下のプロパティを使用してグリッド項目を配置することを検討する場合は、auto上記のマージンに関するセクションをお読みください。

align-items
justify-items
align-self
justify-self

https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

コンテンツをグリッド項目の水平方向の中央に配置するには、text-alignプロパティを使用できます。

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

垂直方向のセンタリングの場合vertical-align: middleは機能しないことに注意してください。

これは、vertical-alignプロパティがインラインコンテナーとテーブルセルコンテナーにのみ適用されるためです。

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

display: inline-gridインラインレベルのコンテナーが確立されると言う人もいるかもしれませんが、それは事実です。では、なぜvertical-alignグリッドアイテムでは機能しないのでしょうか。

その理由は、グリッド形式のコンテキストでは、アイテムがブロックレベルの要素として扱われるためです。

6.1。グリッドアイテム表示

displayグリッド項目の値は、blockified：指定した場合display、グリッドコンテナを生成する要素のインフロー子のインラインレベル値で、そのブロックレベルと同等に計算します。

プロパティが元々設計されたブロックフォーマット設定コンテキストでvertical-alignは、ブラウザーはインラインレベルのコンテナー内でブロックレベルの要素を見つけることを期待していません。これは無効なHTMLです。

CSSポジショニング

最後に、グリッドでも機能する一般的なCSSセンタリングソリューションがあります。絶対配置

これは、ドキュメントフローから削除する必要があるオブジェクトを中央に配置するのに適した方法です。たとえば、次のような場合：

単に設定position: absoluteを中心とすることが要素の上に、そしてposition: relative含むブロックとなる祖先に（通常は親です）。このようなもの：

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

コードスニペットを表示

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

スニペットを展開

このメソッドがどのように機能するかについての完全な説明は次のとおりです。

特に画面のサイズを変更すると、要素が中央に配置されない

以下は、グリッド仕様の絶対配置に関するセクションです。

https://www.w3.org/TR/css3-grid-layout/#abspos

— マイケル・ベンジャミン
ソース

こんにちはマイケル、グリッドを使用して各列のサイズを行の最小列のサイズに変更することだけが可能かどうか疑問に思っていましたか？

— Codesee、2018年

@TheCodesee、すべての要件に応じて、それが可能になる場合があります。コードサンプルはありますか？または、詳細をすべて記載した新しい質問を投稿することを検討してください。

— Michael Benjamin

であるgrid-containerとgrid-itemされているHTMLタグ？

— diEcho

これらはカスタム HTMLタグです。このデモで行ったように、独自のタグを作成できます。stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

これは素晴らしい答えです、ありがとう。それは私の間であること、あなたの二つの第一の例では、実感しましたflexとgrid、align-items滞在同じですが、何らかの理由でjustify-contentなりjustify-items

— WoJ

フレックスボックスを使用して、テキストを中央揃えにすることができます。ちなみに、テキストは匿名のフレックスアイテムと見なされるため、追加のコンテナーは必要ありません。

フレックスボックスの仕様から：

それぞれのインフロー子供フレックスコンテナはなりフレックス項目、および直接内部に含まれているテキストの各連続する実行フレックスコンテナは匿名に包まれているフレックスアイテム。ただし、空白（つまり、white-spaceプロパティの影響を受ける可能性のある文字）のみを含む匿名のflexアイテムは、レンダリングされません（まるでのようにdisplay:none）。

したがって、グリッド項目をフレックスコンテナー（display: flex）として作成し、とを追加align-items: centerしjustify-content: centerて、垂直方向と水平方向の両方の中央に配置します。

HTMLとCSSの最適化も行いました：

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

スニペットを展開

— ヴァディム・オヴチンニコフ
ソース

フレックスを使用しようとしないでください。CSSグリッドにとどまる！:)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

ここでセンタリング作業を行っています。

divグリッドセルの内側にあるものを中央に配置したい場合は、それを機能させるためにネストされたグリッドを定義する必要があります。（そこに示されている両方の例をいじってください。）

https://css-tricks.com/snippets/css/complete-guide-grid/

乾杯！

— コンラッドアルブレヒト
ソース

ネストされたグリッドについて疑問に思っていました。その方法を推測してくれてありがとう。グリッドでフレックスを回避する必要があると思いますか、それとも組み合わせても問題ありませんか？

— ビートルート2017

組み合わせるのは問題ありませんが、仕事に適したツールを使用していることを確認する必要があります。時間を見つけて、レイチェルズのプレゼンテーションを見てください。CSSグリッドのトピックで多くのことがわかります。 youtu.be/3vJE3bVoF-Q

— コンラートアルブレヒト

このアプローチの問題は、グリッドアイテムで境界線を使用しているときに発生します...

— Andrew

これはによって短縮できますplace-self: center;。

— DevonDahon

CSSのplace-items省略プロパティは、それぞれalign-itemsプロパティとjustify-itemsプロパティを設定します。2番目の値が設定されていない場合は、最初の値も使用されます。

.parent {
  display: grid;
  place-items: center;
}

— CloudBranch
ソース

place-itemsエッジでは現在サポートされていません

— Konrad Albrecht

フレックスを使用してみてください：

プランカーのデモ：https ://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

— Younis Ar M
ソース

-2

あなたはこれを求めている？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

スニペットを展開

— レナートシケイラ
ソース

結構です。テキストも垂直に配置する必要があります。

— ビートルート2017

使用

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira 2017

-2

私はこの質問が2年前のものであることを知っていますが、誰も提案していないことに驚いています。

   text-align: center;

これはjustify-contentよりも普遍的なプロパティであり、グリッドに固有のものではありませんが、この質問で具体的に尋ねられるテキストを処理する場合、スペースに影響を与えずにテキストを中央に配置することがわかりますグリッドアイテム間、または垂直方向の中央揃え。垂直軸上にあるテキストを水平方向に中央揃えにします。また、コンテンツの正当化とアイテムの整列によって追加される複雑さの層を取り除くこともわかりました。justify-contentとalign-itemsはグリッドアイテム全体に影響し、text-alignはテキストを中央のコンテナーに影響を与えずに中央揃えにします。これがお役に立てば幸いです。

— Aft3rL1f3
ソース

CSSグリッドの中央揃え

グリッドレイアウトの構造と範囲

CSSグリッドでセンタリングするための6つの方法

フレックスボックス

グリッドレイアウト

auto マージン

ボックスの配置プロパティ

text-align: center

CSSポジショニング

`auto` マージン

`text-align: center`