CSS 網格響應子元素垂直和水平居中項目

Question

你如何有一個 CSS 網格在水平和垂直居中時對其子容器作出響應，我只想用 CSS 網格來做到這一點。 下面的代碼根本不起作用，但它是我想要的基礎知識，請有人讓我的代碼工作並使盒子響應，拜托！

 html, body { display: grid; justify-items: center; align-items: center; height: 100vh; margin: 0; }.box { height: 500px; width: 100%; max-width: 800px; background: red; border: 3px solid blue; }

 <div class="box"></div>

Answer 1

移除html

 body { display: grid; justify-items: center; align-items: center; height: 100vh; margin: 0; }.box { height: 500px; width: 100%; max-width: 800px; background: red; border: 3px solid blue; box-sizing:border-box; }

 <div class="box"></div>

Answer 2

只需從 CSS 目標元素中刪除 HTML 導致 HTML 是頁面的根元素

body {
      display: grid;
      justify-items: center;
      align-items: center;
      height: 100vh;
      margin: 0;
}

.box {
  height: 500px;
  width: 100%;
  max-width: 800px;
  background: red;
  border: 3px solid blue;
}

<div class="box"></div>