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

Question

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

代码已上传到 codepen：https ://codepen.io/misiekdp/pen/ZEWgagr 或在此处查看工作片段：

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>

标签： htmlcssflexboxresponsive-design

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 需要比屏幕高度长，它就无法正常工作。

工作示例：
运行片段并在整页中查看它，这样它就足够大到可以看到居中的内容

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>