仅使用 FlexBox 的双 div 居中和重叠

Question

使用 flexbox 方法，我想“双中心”两个单独的 div： svg 和 text 以便它们重叠彼此同时垂直居中并水平正好在彼此的中心支点上方，无论它们多高或多宽。

初始状态是显示svg div。当鼠标悬停时，svg 隐藏，text 显示：

jsFiddle demo

在这里，第一个 svg div 使用 flexbox 神奇的 margin: auto 巧妙而优雅地居中

但是第二个text div 使用繁琐的手动定位技巧，其中高度是猜测的，当字体大小更改等时不起作用。

如何使text 优雅居中，重叠svg，仅使用 flexbox？

Answer 1

对于跨浏览器支持，您需要使用transform: translate，因为浏览器对绝对元素的处理方式不同

text{
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

堆栈sn-p

container{
    display:flex;
    background: #DDD;
    position: absolute;
    color: rgba(0,0,0,0);
    width: 300px;
    height: 300px;
}

svg {
    margin: auto;	/* CENTERSsvg graphic in the middle of container WORKS ELEGANTLY */
    width: 100px;
    height: 100px;
    opacity:1;
    fill: red;
    transition: all 500ms ease;
}

text{
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

container:hover svg {
    opacity: 0;
}

container:hover text {
    color: black;
    opacity: 1;
    transition: all 500ms ease;
}

<a href="#">
    <container>
          <svg viewBox="0 0 200 200"><rect width="200" height="200" /></svg>
          <text>Here Goes My Centered Text</text>         
    </container>
</a>

---

根据评论更新

要使用 Flexbox 的居中功能，可以创建 2 个容器，它们相互叠加，就像我们在 Flexbox 可用之前一直采用的方式一样。

此解决方案不需要translate，它使用 Flexbox 将项目水平和垂直居中，无论它们各自的大小。

container {
    display:flex;    
    align-items: center;
    justify-content: center;
    background: #DDD;
    color: rgba(0,0,0,0);
    position: absolute;
    left: 0; top: 0;
    width: 300px;
    height: 300px;
}
container + container{
    background: transparent;
    pointer-events: none;
}
svg {
    width: 100px;
    height: 100px;
    opacity:1;
    fill: red;
    transition: all 500ms ease;
}
text{
    width: 100%;
    text-align: center;
}
container:hover svg {
    opacity: 0;
}
container:hover + container text {
    color: black;
    opacity: 1;
    transition: all 500ms ease;
}

<a href="#">
  <container>
    <svg viewBox="0 0 200 200">
      <rect width="200" height="200" />
    </svg>
  </container>
  <container>
    <text>Here Goes My Centered Text</text>
  </container>
</a>