垂直居中问题[重复]

Posted 2023-03-05

【中文标题】垂直居中问题[重复]

【英文标题】：Issue with vertical centering [duplicate]

【发布时间】：2018-10-07 14:00:36

【问题描述】：

我想使用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) 以便距离从上到中心和从下到中心是相同的。请看这张图片：

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

我怎样才能做到这一点？

【问题讨论】：

如需进一步参考，请参阅Centering in CSS: A Complete Guide @ CSS-Tricks。

@Temani Afif。真的？您使用答案标记了一个弹性框作为该问题的正确答案？看过“保持父元素相对和外部元素绝对，等等......”。所以relative != flex.

@Asker 我添加了 flexbox 解决方案作为第二个 dup ;) 如果你愿意，我可以添加更多... flexbox 是未来读者考虑的替代方案

现在你已经有了所有与居中相关的重复项，仅限于 5 个，但我仍然可以添加更多。

Flex 不影响相对/绝对位置值。

【参考方案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>

【讨论】：

我没有改变层次结构。

好的。我看到你的权利。感谢您的解决方案。但无论如何都有问题。请看看如果只有少数（如 2 个）项目会发生什么。也应该水平居中。但它们不是——因为其中一项在左侧——另一项在红色区域的右侧边界。那么你会这么好心编辑你的解决方案吗？问候，Tom 编辑：使用justify-content: center; 会将最左边的项目移出可缩放的 div 边界！

我将 justify-content 从 space-between 更改为 center。但是，最后一个孩子的右边距似乎被截断了，我相信是因为包含块“过度约束”。不幸的是，我无法找到解决方案。见Last margin / padding collapsing in flexbox / grid layout。

我想说answer from Franklin Pious 在您的情况下更简单。但我发现该解决方案也会截断边距，这次是第一个孩子的左边距。 Working example.¯\_(ツ)_/¯

是的，我明白你的意思。如果有兴趣，请参阅Can't scroll to top of flex item that is overflowing container 以了解该问题的说明。

【参考方案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>

【参考方案3】：

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

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

【讨论】：

但是你并没有改变层次结构，唯一改变的是显示属性。

你弄错了。 display 属性更改为 flex。 位置保持相对

好的。谢谢 - 我又看了一遍文档，他们告诉我 - 你是对的！

没问题，可能会出现歧义:)。如果他们为你工作，请勾选他和我的回答者:)