不同高度的菜单需要垂直放置在父母div的中心

Question

你可以帮我设置下拉菜单位置垂直居中的父母(橙色)div？现在他们从父div的顶部边缘出现.我想下拉位置与下面屏幕截图中显示的完全相同.当您将鼠标悬停在橙色框上时,您会看到下拉列表.

小提琴:

码:

.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