Css 仅使用FlexBox进行双Div定心和重叠

使用flexbox方法，我想“双中心”两个独立的div:

svg

和

text

，以便它们相互重叠，同时在垂直和水平方向上精确居中于彼此的中心轴点，无论它们有多高或多宽

初始状态为显示的

svg

div。鼠标悬停时，

svg

隐藏并

text

显示：

这里，第一个

svg

div使用flexbox神奇的

margin:auto

然而，第二个

text

div使用了一个繁琐的手动定位程序，其中的高度是猜测的，当字体大小改变时，该程序就不起作用了

---

如何使

文本

优雅居中，重叠

svg

，仅使用flexbox？

对于跨浏览器支持，您需要使用

转换：翻译

，因为浏览器处理绝对元素的方式不同

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

堆栈片段

容器{
显示器：flex；
背景：DDD；
位置：绝对位置；
颜色：rgba（0,0,0,0）；
宽度：300px；
高度：300px；
}
svg{
边缘：容器中的Auto//CysSvg图形优雅地*/
宽度：100px；
高度：100px；
不透明度：1；
填充物：红色；
过渡：所有500ms缓解；
}
正文{
位置：绝对位置；
左：0；
宽度：100%；
最高：50%；
转化：translateY（-50%）；
文本对齐：居中；
}
容器：悬停svg{
不透明度：0；
}
容器：悬停文本{
颜色：黑色；
不透明度：1；
过渡：所有500ms缓解；
}

---

感谢您的演示，但在我的FireFox 50.0中，这两个div并排显示，而不是重叠显示，这是我想要的，正如在我的演示中所看到的那样。@Sam我无法测试FF 50.0…但是如果您将

设置为左：0在
文本上
。。。较旧的浏览器通常需要x/y值，否则它们的行为也会有所不同！现在，您的演示可以很好地与两个div重叠。虽然现在使用css定位更加优雅（+1），但如果我们能够使用flexbox的居中功能来完成这项工作，那将是非常棒的，因为在我的演示中，我们使用更少的代码来居中
svg
div。@Sam这是今天无法做到的，当使用Flexbox时，不同的浏览器对绝对定位元素的处理不同。我将做另一个演示，看看它是否有效……我会带着它回来。的确，我理解第二种方法，而且这可能是flexbox中的唯一方法，尽管它需要更多的html代码。这个答案是一个很好的例子，CSS Flexbox在代码中并不总是更干净，正如在您的答案中可以看到的那样，第一种方法是缩短代码，并同样很好地解决居中问题。谢谢