CSS Grid 容器未以浏览器视口为中心答案

【问题标题】：CSS Grid container not centered to the browser viewportCSS Grid 容器未以浏览器视口为中心
【发布时间】：2019-06-15 20:42:22
【问题描述】：

我已经定义了一个具有以下属性的 CSS 网格。但是，我发现整个网格容器在我的 Chrome 桌面浏览器（Macbook Pro 15" 显示器）上的浏览器窗口中没有居中（垂直和水平）。

有人可以帮助我了解如何将整个网格容器居中到浏览器视口的中间吗？

html { 

    background: url('images/cbg.png') no-repeat center center fixed; 
    -webkit-background-size: cover; /* Safari */
    -moz-background-size: cover; /* Mozilla Firefox */
    -o-background-size: cover; /* Opera Browser */
    background-size: cover; /* Chrome */


    text-rendering: optimizeLegibility;
    text-align: center;
    }

body {
    box-sizing: border-box;
    min-height: 100%;
    margin: 20px;

    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center; 
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}

/**** 使用进入 CSS 网格容器的网格项更新 .wrapper ****/

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 150%;
}

.box-txt {
  background-color: #fff;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
  border: 1px solid black;
}

.header1
    {

        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 2;
        grid-row-end: 3; 
        text-align: center;
        height: 80px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.footer{
        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 5;
        grid-row-end: 6;
        text-align: center;
        height: 120px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.imgbox {
        grid-column-start: 6;
        grid-column-end: 12;
        grid-row-start: 3;
        grid-row-end: 4;
        height: 500px;
    }

    .imgbox > img {
        width: 100%;
        height:100%;
        display: block;
        object-fit: cover;
        border-radius: 5px;
        }

    .b {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .c {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .d {
        grid-column-start: 7;
        grid-column-end: 12; 
        grid-row-start: 4;
        grid-row-end: 5;
    }

【问题讨论】：

您正在针对body 元素设置对齐属性。将它们移动到 .wrapper 元素。 jsfiddle.net/57bd4w6m
您是否尝试将 margin:auto 放入您的 .wrapper ？或者也许在你的身体上有一个display:flex。没有相关的 html 就很难提供帮助
@Morpheus 我尝试了您对 .wrapper 建议的更改，但我的整个网格因这些设置而崩溃。请记住，我使用了几个用网格线定义的网格项。我正在更新我的问题以添加有关我的网格内容的更多详细信息。
@mdubus 我都试过了（display:flex on body 和 margin:auto ）。两者都不起作用。

标签： html css css-grid

【解决方案1】：

尝试在那个地方使用 flex。

你可以添加到包装器

display: flex;
justify-content: center;
align-items: center;

希望这可行

【讨论】：

justtify-contents 不是属性。请在发布前检查错误。应该是justify-content
我的整个页面已经在 css 网格属性上编码，我现在无法切换到 display:flex。我需要将现有的 css 网格容器 .wrapper 本身置于视口的中心。

【解决方案2】：

我认为这是你需要的：

body {
    box-sizing: border-box;
    margin: 20px;
    width:100%;
    height: 100vh;

    display:flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}

<body>
  <div class="wrapper">
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    <div class="col-1">5</div>
    <div class="col-1">6</div>
    <div class="col-1">7</div>
    <div class="col-1">8</div>
    <div class="col-1">9</div>
    <div class="col-1">10</div>
    <div class="col-1">11</div>
    <div class="col-1">12</div>
  </div>
</body>

如果您需要更多帮助，请告诉我 :)

【讨论】：

那行不通。请使用进入 CSS 网格容器的网格项检查我更新的代码。
我将我的代码更新为我猜你的期望。如果这不是您想要的，您能否也提供您的 HTML？