jquery - 不同高度的菜单需要放置在其父 div 的垂直居中

Question

你能帮我设置下拉菜单位置垂直居中他们的父(橙色)div 吗？现在它们从父 div 的顶部边缘出现。我想要下拉位置与下面的屏幕截图完全相同。当您将鼠标悬停在橙色框上时，您会看到下拉菜单。

Fiddle:

代码:

.parent{
width:100px; height:100px;
background:orange;
position:relative;
margin-right:100px;
float:left;
margin-bottom:80px;
}
.parent:hover .child{display:block;}
.parent .child{
    position:absolute;
    top:0;
    left:100%;
    display:none;
    }
.parent .child ul{    
    list-style:none;
    margin:0;
    padding:5px;
    background:#262626;
    }
    .parent .child ul li{
        padding:5px;
        font:normal 12px arial;
        border:1px solid black;
        background:#464646;
        color:#fff;
        }

Answer 1

这可以只使用 CSS3 来完成

.child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

jsfiddle