我如何将网格容器水平地对准窗口？ [重复]

Question

此问题已经在这里有了答案：

How to horizontally center a <div>（103个答案）

关闭4分钟前。

我已经看到很多有关网格elements的答案，但是我想水平地将网格container居中。这是我现在拥有的代码的片段。

.htable {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.hlines {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

results[type='table'] {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

results[type='lines'] {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

form {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

content {
  display: grid;
  grid-template-rows: 5vw 85vw;
  grid-template-columns: 20vw 35vw 35vw;
  margin: auto;
}

<content>
  <form>
    <br>
    <uinput type='pulse'>
      <label for='pulse'>pulse:</label>
      <input type='number' class='pulse' min='2' maxlength='2' oninput='...'>
    </uinput><br><br>
    <uinput type='cpulse'>
      <label for='cpulse'>counterpulse:</label>
      <input type='number' class='cpulse' min='2' maxlength='2' oninput='...'><br><br>
    </uinput>
  </form>

  <br>
  <h3 class='htable'>table</h3>
  <results type='table'>
    <tableWrap>
      <p class='resolve'></p>

      <!--Table will be injected here-->

    </tableWrap>
  </results>

  <h3 class='hlines'>line diagram</h3>
  <results type='lines'>
    <linesWrap>
      <canvas class='lines' width=500px></canvas>
    </linesWrap>
  </results>
</content>

我希望这是所有需要的代码，因此不需要梳理我的凌乱代码。同样，我想将网格container居中（如content元素中的内容。）>

完整源代码here，如果需要。

我已经看到了许多有关网格元素的答案，但是我想水平放置网格容器。这是我现在拥有的代码段。 .htable {grid-row：1/2; ...

Answer 1

在您的情况下，您的grid-template-columns为20vw 35vw 35vw，20 + 35 + 35 =90。因此，将其居中可以将padding: 0 5vw或margin: 0 5vw添加到网格中，并且无需触摸父元素即可工作。