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

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

要进行说明，请从容器元素（overflow: hidden）中删除.box-link。

DEMO

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

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设置所有Flex容器项的默认对齐方式，包括匿名弹性项。 align-self允许为各个弹性项重写此默认对齐方式。

8.4. Packing Flex Lines: the align-content property

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

使用过渡垂直居中文本

1 个答案: