使用过渡垂直居中文本

Question

我正在使用 flex 和 transition 来尝试实现某些目标。

以前从未使用过 flex，但认为它可能适用于我想要实现的目标。

请看fiddle

我想要实现的是，当您将框悬停时，底部栏会覆盖该框（这可行），并且标题和文本过渡到框的中心。这是一半的工作。

它们水平居中，但不是垂直居中。文本应该在中心更靠近。

这有可能还是我做错了什么？

html

<a href="#" class="box-link row">
  <div class="overbox row">
    <h4>This is a title</h4>
    <p>Lorem ipsum dolor sit amet, usu debet tation cu. Eam assum habemus dignissim ne</p>
  </div>    
</a>

css

.box-link {
    display: flex;
    flex: 1 1 0px;
    flex-flow: row wrap;
    width: 19.8125rem;
    height: 19.8125rem;
    position: relative;
    overflow: hidden;
    background:red;
    text-align: center;
    border:1px solid red;
}
.box-link .overbox {
    align-items: center;
    justify-content: center;
    transition: 0.5s ease-in-out;
    background-color: rgba(255, 255, 255, 0.6);
    min-height: 15%;
    width: 100%;
    padding: 0.9375rem;
    position: absolute;
    top: 85%;
    left: 0;
    display: flex;
    flex-flow: row wrap;
}
.box-link:hover .overbox {
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
h4 {
  margin:0;
}

Answer 1

在悬停时，由于填充声明，文本相对于容器稍微向右对齐。

为了说明，请从容器元素 (.box-link) 中删除 overflow: hidden。

DEMO

---

如果您从.overbox 中删除padding: 0.9375rem，则两个框对齐并且文本完全水平居中。

DEMO

---

弹性项目没有更紧密地垂直居中的原因是因为在带有flex-direction: row 的多行弹性容器上，弹性对齐由align-content 属性控制，而不是align-items。这就是你所拥有的：

.box-link .overbox {
    align-items: center;
    justify-content: center;
    ...
    ...
    ...
    display: flex;
    flex-flow: row wrap;
}

当横轴有多条线时使用的属性是align-content。

将此添加到您的 CSS：

.box-link .overbox {
    align-items: center;
    justify-content: center;
    align-content: center;       /* NEW */
    ...
    ...
    ...
    display: flex;
    flex-flow: row wrap;
}

DEMO

---

来自规范：

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items 设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。 align-self 允许为单个弹性项目覆盖此默认对齐方式。

8.4. Packing Flex Lines: the align-content property

align-content 属性在 当横轴有额外空间时，弹性容器，类似于 justify-content 如何在主轴内对齐单个项目。 请注意，此属性对单行 flex 容器没有影响。