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

Posted 2023-03-29

【中文标题】仅使用 FlexBox 的双 div 居中和重叠

【英文标题】：Double Div Centering And Overlapping Using FlexBox Only

【发布时间】：2017-11-21 21:31:39

【问题描述】：

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

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

jsFiddle demo

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

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

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

【参考方案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   /></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   />
    </svg>
  </container>
  <container>
    <text>Here Goes My Centered Text</text>
  </container>
</a>

【讨论】：

感谢您的演示，但在我的 FireFox 50.0 中，两个 div 并排显示，而不是重叠，这是我想要的，如我的演示中所示。

@Sam 我无法测试 FF 50.0...但是如果您在 text 上设置 left: 0; 会怎样？ ...较旧的浏览器通常需要 x/y 值，否则它们的行为会再次不同

感谢@LGSon +1 美丽！现在您的演示可以很好地与两个 div 重叠。虽然它现在使用 css 定位更加优雅（+1），但如果我们可以仅使用 flexbox 的居中功能来完成这项工作，那就太棒了，就像在我的演示中使用的那样，将 svg div 居中更少的代码.

@Sam 这在今天是做不到的，因为不同的浏览器在使用 Flexbox 时对绝对定位元素的处理方式不同。我会再做一个演示，看看是否可行……会回来的

棒极了，我理解第二种方式，确实这可能是 flexbox 中唯一的方式，尽管它占用了更多的 html 代码。这个答案是一个很好的例子，CSS Flexbox 在代码中总是更干净并不是真的，从你的答案中可以看出，第一种方法是更短的代码并且同样很好地解决了居中问题。谢谢！