不同高度的菜单需要垂直放置在父母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

Answer 2

如果你想要一个jquery解决方案，试试这个：

$('.parent').on('mouseover', function(){
  var ph = $(this).height();
  var $ch = $(this).find('.child');
  var ht = $ch.height();
  var offset = ph/2 -ht/2;
  $ch.css('top', offset);
});

小提琴HERE