グリッドコンテナーを垂直方向と水平方向の中央に配置する

Question

驚いたことに、私はこれについてオンラインで何も見つけることができません。多分私は何かを逃した。 CSSラッパーでメインラッパー全体を水平方向および垂直方向に中央揃えし、応答性を維持するにはどうすればよいですか？

.wrapper {
  display: grid;
  grid-template-columns: minmax(100vw, 1fr);
  grid-template-rows: minmax(100vh, 1fr);
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

上記のCSSを使用すると、divは垂直ではなく水平に中央揃えされます。

次のCSSは、divを水平方向に中央揃えしますが、垂直方向には中央揃えしません。

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

Answer 1

の代わりに justify-content: center 使用する justify-items: center。

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center; /* adjusted */
}

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

2番目の例では、次のように言います。

次のCSSは、divを水平ではなく垂直に中央揃えします。

これは、コンテナに余分な高さがないためです。行はコンテンツの高さです。の代わりに grid-template-rows: 1frgrid-template-rows: 100vh。

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

body {
  margin: 0;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

詳細はこちら：

• グリッドレイアウトのalign-itemsとalign-contentの違いは何ですか？
• CSSグリッドの中央揃え