Question

这可能是一个非常愚蠢的问题，但是我很难找到答案：如何将网格自身水平居中？我似乎只能找到如何在网格内将项目居中。是否有“最佳实践”？谢谢

Answer 1

您可以使用flex，所以CSS就像

display:flex

一旦有了这个，您就可以使用对齐内容中心将其垂直对齐喜欢

justify-content : center

，如果您希望某物水平对齐，则可以使用

align-items:center

让我们说，如果您想垂直和水平居中放置项目，则可以使用

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

，您将获得商品，这是同一商品的链接 https://www.w3schools.com/css/css3_flexbox.asp

让我知道这是否有帮助。

Answer 2

flexbox是最简单的方法。您必须提供父元素：

display:flex;
justify-content: center;

在我的情况下，它是包裹我的网格的body标签

body {
  margin: 40px;
  display: flex;
  justify-content: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

如何居中网格

2 个答案: