仅使用FlexBox进行双重居中和重叠

Question

使用flexbox方法，我想＆＃34;双中心＆＃34; 两个separete div： svg和text他们重叠彼此同时也垂直和水平地居中于每个中心枢轴点，无论多高他们是宽的。

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

jsFiddle demo

在这里，第一个svg div使用flexbox的神奇margin: auto

很好地优雅地居中

然而，第二个text div使用了一个繁琐的手动定位黑客，其中高度被猜测，当字体大小改变时它不起作用。

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

Answer 1

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

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

Stack snippet

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的居中功能，可以按照Flexbox可用之前的方式创建2个容器，彼此叠加。

此解决方案不需要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>