将对象（div）垂直和水平居中，无大间隙环绕

Question

我在水平和垂直居中时遇到问题，将 div（蓝框）包裹在一个大 div（绿框，高度 100%）中。 有人建议我使用 flex 显示，但线条之间有很大的空间，我希望对象之间只有我设置的空间来分隔它们（即 margin: 10px）。

代码上传到codepen：https://codepen.io/misiekdp/pen/ZEWgagr 或在此处查看有效的 sn-p：

body {
  margin: 0;
}

.wrapper h1 {
  margin: 0;
  text-align: center;
  font-size: 30px;
}

#x1 {
  height: calc(100% - 58px);
  margin: 10px;
  border: 1px solid green;
  /* padding: 5px; */
  /* position: relative; */
  /* transform: translateX(10%) translateY(50%); */
  position: absolute;
  /* top: 50% */
  display: flex;
  flex-direction: row;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}

.jajucho {
  /* position: absolute; */
  /* display: block; */
  display: inline-block;
  height: 100px;
  margin: 10px;
  width: 100px;
  border: 1px solid blue;
  align-items: center;
  text-align: center;
  justify-content: center;
  /* display: flex; */
  /* position: absolute; */
}

<div class="wrapper">
  <h1>Menu</h1>
  <div id="x1">
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>
    <div class="jajucho">
    </div>

  </div>
</div>

Answer 1

您只需进行一些更改即可完成这项工作：

1.将您的 .jajucho 类包装在单个容器中，以便我们可以垂直居中该容器而不会分散其内容，例如

<div id="x1">
    <div class="item-container">
        <div class="jajucho">
        </div>
        <!-- Rest of your divs here... -->
    </div>
</div>

2。将align-items: center; 添加到#x1 使其居中对齐垂直（justify-content: center 仅水平工作）

#x1 {
    align-items: center;
    /* Rest of your CSS...*/
}

注意：附带说明，您应该将 height: calc(100% - 58px); 更改为 min-height - 否则如果屏幕窄且 #x1 则无法正常工作需要比屏幕高度长。

工作示例：
运行 sn-p 并在 Full Page 中查看它，这样它就足够大到可以看到居中的内容了

body {
  margin: 0;
}

.wrapper h1 {
  margin: 0;
  text-align: center;
  font-size: 30px;
}

#x1 {
  min-height: calc(100% - 58px);
  margin: 10px;
  border: 1px solid green;
  position: absolute;
  display: flex;
  flex-direction: row;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.jajucho {
  display: inline-block;
  height: 100px;
  margin: 10px;
  width: 100px;
  border: 1px solid blue;
  align-items: center;
  text-align: center;
  justify-content: center;
}

<div class="wrapper">
  <h1>Menu</h1>
  <div id="x1">
    <div class="item-container">
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
      <div class="jajucho">
      </div>
    </div>
  </div>
</div>