具有绝对定位子项的Flexbox不会扩展

Question

我有一个Flexbox，一个孩子绝对处于居中和居中的位置。如果我不给我的容器一个高度，它就不会显示。为什么它不能自动扩展到其孩子的高度？

<div style={{display:"flex",position:"relative",backgroundColor:"#f2f2f2", width: "100%"}}>
      <div  className="text">Some text</div>



</div>

css类文字：

.text{
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%); 
}

我使用绝对位置，因为我需要重叠

Answer 1

添加width: 100%会使元素扩展，尽管我不确定这是否是您所需要的。

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  width: 100%;
}

<div style="display:flex;position:relative; background-color: #f2f2f2; width: 100%">
  <div class="text">Some text</div>
</div>

Answer 2

如果使用的是flex，则可以使用justify-content: center将子元素放在flex元素内。无需在子元素上使用position: absolute。

<div style={{display:"flex",justify-content:"center";backgroundColor:"#f2f2f2", width: "100%"}}>

我猜大括号和对象是因为您正在以某种方式向样式添加Javascript代码。我宁愿只使用css类，并添加特定的类而不是内联样式。最终减少了混乱的代码。