Flexbox的具有绝对定位的孩子不扩大

Question

我有一个Flexbox，就和孩子绝对定位和centered.If我不给予高度我的容器它不是displayed.Why它不是扩大其孩子的高度全自动？

<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您挠性元件中居中的子元素。无需使用position: absolute你的子元素。

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

我想花括号和对象是因为你以某种方式加入Javascript代码的风格。我宁愿只css类本，并添加而不是内嵌样式的特定类。少乱码到底。