flexbox中具有相对和绝对定位的垂直居中答案

【问题标题】：Vertical centering with relative and absolute positioning in flexboxflexbox中具有相对和绝对定位的垂直居中
【发布时间】：2016-10-27 16:51:08
【问题描述】：

我正在使用absolute 和relative 定位我的.box，但正如您所见，文本似乎不是top: 100%。

谁能解释这是为什么？

比如为什么在指定top: 100% 时文本（一些文本会在这里）溢出到子元素中？

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 200px;
  margin: 0 auto;
  width: 90%;
  border: 1px solid red;
}
.child {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.childschild {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box">
  <div class="child">
    <img src="dog1.jpg" alt="Picture of a dog" width="250" height="250">
    <div class="childschild">
      some text is going here
    </div>
  </div>
  <div class="child">dfd</div>
  <div class="child">dfd</div>
</div>

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

如果我理解正确，这可以帮助你..

尝试使用margin-top: -10px;，它将顶部的空间减少10px。你也可以试试marign-left,margin-right 和margin-bottom。

【讨论】：

【解决方案2】：

问题是因为在您的transform 中，您将-50% 应用于Y 轴，这意味着将从top:100% 中减去50%，所以它会是您所说的top:50%，没有transform

如@Michael_B 所述，您可以仅将转换应用于 X 轴，移除 Y 轴，或者您可以使用下面的代码将框下方的文本垂直/水平居中：

position: absolute;
top: 100%;
right: 0;
left: 0;
margin: auto

注意：我将您的 img 更改为 background-img（可选）

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 200px;
  margin: 0 auto;
  width: 90%;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.box > div:first-of-type {
  background: url("//dummyimage.com/100x100");
  position: relative
}
.box > div:first-of-type div {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: auto;
  width: 50px;
  text-align:center;
  background:red
}

<div class="box">
  <div class="child">
    <div>some text is going here</div>
  </div>
  <div class="child">dfd</div>
  <div class="child">dfd</div>
</div>

【讨论】：

【解决方案3】：

.. 为什么指定 100% 时，文本（'some text is going here' text）会溢出到子元素中？

因为您已将transform 属性应用于元素：

.childschild { transform: translate(-50%, -50%); }

这告诉元素沿 x 轴向后移动 50% 的宽度，沿 y 轴向后移动 50% 的高度。

所以首先你要告诉它是top: 100%。然后你告诉它回溯 50% 的高度，这使它回到 .child 元素上。您可以删除transform，它会按预期工作。

试试这个：transform: translateX(-50%); (demo)

可以在这里找到更完整的插图说明：

Element will not stay centered, especially when re-sizing screen

【讨论】：