CSS-Rasterelemente in voller Breite mit place-content:center

Question

Ich habe place-content: center von CSS Grid verwendet, um das Div vertikal und horizontal im festen Container zu zentrieren:

.outer {
  Position: fest;
  Einschub: 0;
  Hintergrund: schwarz;
  Anzeige: Raster;
  Ortsinhalt: Mitte;
}
.innere {
  Polsterung: 30px;
  Hintergrund: weiß;
  Breite: 100 %;
  maximale Breite: 500 Pixel;
}

<div class="outer">
<div class="inner">Einige Inhalte hier</div>
</div>

Ich möchte, dass das innere Div die volle Breite hat, mit einer maximalen Breite von 500 Pixeln, aber es scheint die Eigenschaft width: 100% nicht zu respektieren, wie ich erwartet habe.

Kann jemand erklären, warum das passiert und wie man es beheben kann, wenn möglich, die Grid-Implementierung beibehalten (ich weiß, dass es andere Möglichkeiten gibt, so etwas zu zentrieren, aber aus Neugier wollte ich versuchen, dies zu tun. Eine Rolle zu spielen ist mehr wichtiger als alles andere)

Answer 1

您可以使用 flex 代替 grid，这样您就可以非常轻松地做到这一点。

.outer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
}

<div class="outer">
  <div class="inner">Some content here</div>
</div>

Answer 2

您可以在网格项上使用 place-self，而不是使用 place-content。

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
  place-self: center;
}

<div class="outer">
  <div class="inner">Some content here</div>
</div>