垂直居中问题[重复]

Question

我想使用relative div 来填充它，其中inline-block 元素彼此相邻对齐，它们都具有相同的宽度和高度（= 正方形）。

所以如果有n 元素，relative div 应该可以在 x 方向滚动。正如您在下面的示例代码中看到的那样，这是有效的：

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.item {
  background: yellow;
  display: inline-block;
  width: 4%;
  margin: 0% 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

但现在我希望 item-elements (黄色方块) 垂直对齐到 red parent-div (relative div) 以便距离从上到中心和从下到中心是相同的。请看这张图片：

注意：我不想改变层次结构（保持父元素相对和外部元素绝对等...）

我怎样才能做到这一点？

Answer 1

我推荐使用flexbox。
见A Complete Guide to Flexbox。

下面，align-items:center：

... 定义浏览器如何沿容器的横轴在弹性项目之间和周围分配空间。

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow: hidden;
  overflow-x: scroll;
  background: red;
  display: flex;
  align-items: center;
}

.item {
  background: yellow;
  flex: 0 0 4%;
  margin: 0 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

---

编辑

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
  display: flex;
  justify-content:center;
  align-items: center;
}

.item {
  background: yellow;
  flex: 0 0 4%;
  margin: 0 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 2

不使用 css flex。

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.item {
  background: yellow;
  display: inline-block;
  width: 4%;
  margin: 0% 3%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 3

只需给 .parent 元素这个代码，它应该可以工作： （你可以保留你已经写的代码）

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
 }