一个尝试
div.panel
div.content
div.button-grp
- div.panel
div.button-grp隐藏 - div.panel:hover
div.button-grp出现并水平兼垂直居中，同时div.content变淡
尝试使用flex
看到水平兼垂直居中时，第一反应是使用flex方法
.foo {
display: flex;
align-items: center;
justify-content: center;
}
然而，使用flex布局后，发现问题的关键不在于水平兼居中，而在于将div.content和div.button-grp重合。
重合(overlay)
重合解决方案(常规)
.parent {
position: relative;
}
.child {
position: absolute;
}
通过把child排除于文档流(从左至右，从上至下)，从而自由安排child的位置。
居中
其实，不用flex，水平兼垂直同样简单
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
