CSS居中与Overlay

一个尝试

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%);
}