垂直居中文本轉換

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容器沒有影響。