如何創建一個垂直對齊的div：top，將其位置改爲vertical-align：middle，但在這些狀態中有平滑的動畫轉換？垂直對齊屬性的CSS轉換
我不能得到它的工作，是垂直對齊非過渡？
代碼：
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
vertical-align:middle;
}
這裏的小提琴：https://jsfiddle.net/7amp783t/
我認爲你必須使用jQuery創建滑動動畫。你可以使用jQuery的toogle功能來做到這一點。 http://api.jquery.com/toggle/
儘量變換，而不是垂直它對準中間。這段代碼將完成你正在努力完成的任務。改變你的懸停狀態，包括平移Y（-50％）
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
vertical-align:bottom;
display:table-cell;
transition:all 2s;
}
.inner:hover{
transform: translateY(-50%);
}
而是改變vertical-align屬性，使用transform: translateY()來上下移動。
我有一個小提琴，並獲得此代碼工作：
.outer{
width:200px;
height:200px;
background:red;
display:table;
text-align:center;
}
.inner{
width:100px;
height:100px;
display:table-cell;
vertical-align: bottom;
transition: all 2s ease-in-out;
}
.inner:hover{
transform: translateY(-50%);
}
的translateY(-50%)移動文本「向上」（因此-）由其父框的高度的50％。
編輯您不必擔心設置父div的position: relative。爲清楚起見，我已將其刪除。我也更新了your JSFiddle。
因爲它是一個單元格，所以你可以放下尺寸，反正是200px高;）大家都做了它:) –
當然可以;我只是從原始的JSFiddle代碼中粘貼這個，並沒有想到要將其刪除。 –
你可以試試這個例子：
使用transform：translateY（-50％）;方法 css vertical align animation
.block {
background: orange;
height: 500px;
}
.centered {
text-align: center;
background: pink;
position: relative;
top: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.block:hover .centered {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
讓我知道如果u需要進一步幫助
，如果你想使用垂直對齊，你不應該通過側表單元格側內，但有2個元素使用，您可以在其中設置圍繞它們生成的線條高度的值。在這種情況下，垂直對齊可以採用大量預定義的值或數字值。
https://www.w3.org/wiki/CSS/Properties/vertical-align#Values
因爲你的例子給出了200像素的高度，我們可以解決這個玩法：https://jsfiddle.net/7amp783t/5/
.outer{
font-size:18px;/* whatever */
width:200px;
height:200px;
background:red;
text-align:center;
}
.outer:before {
content:'';
display:inline-block;
height:100%;/* here the line is 100% height of container: set to 200px */
vertical-align:calc(-200px + 1em); /*chrome instead bottom */
}
.inner{
vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */;
display:inline-block;
transition:all 2s;
}
.outer:hover .inner{/* outer, else you need to follow inner */
vertical-align:calc(-100px + 1em);/* lets go half way */
}<div class="outer">
<div class="inner">
Hover me box
</div>
</div>對於這樣一個簡單的問題，此解決方案過於冗贅和複雜。另外，您使用的是任意的「魔術」數字，不必要地依賴於精確的像素值。有了一個響應立場，這將是一個痛苦的後方維護/覆蓋CSS的其他地方。看我上面的例子。 –
@GeoffJames這是爲了幫助操作者理解垂直對齊是如何工作的，並且第一個想法可能與他認爲的不相關。從200px的op例子中，它**可以工作......這個想法起初並不壞，但需要第二個想法（從我的屏幕上，你的答案是下面的第三個;）） –
雖然我不同意它可以工作，我認爲它可能超出了海報預期結果的範圍。不過，這只是我的看法;而你的帖子肯定是內容豐富的。 –
位置：相對可以是一個簡單的方法：
.outer {
width: 200px;
height: 200px;
background: red;
display: table;
text-align: center;
}
.inner {
position: relative;
top: 0;
display: table-cell;
transition: all 2s;
}
.inner:hover {
top: 50%;
}<div class="outer">
<div class="inner">
Hover me
</div>
</div>限定vertical-align作爲動畫的，但只有兩個長度值之間進行內插時。
┌────────────────┬───────────┐
│ Property Name │ Type │
├────────────────┼───────────┤
│ vertical-align │ as length │
└────────────────┴───────────┘因此，bottom和middle之間的轉變會不平滑。
如果您使用vertical-align將內聯級元素相對於其線框對齊，則可以嘗試使用長度值。
但是，您在表格單元格上使用它，它具有不同的行爲，如Table height algorithms中所定義。特別是，長度值不適用於表格單元格。
不，您不必使用jQuery創建滑動動畫。 –