使用 Flex 在父级内居中，无论兄弟姐妹如何

Question

我正在使用 react 和 react-chartjs-2，所以我认为发布标记会使问题复杂化。但在高层次上，布局看起来像这样

<div class="parent">
    <div class="percent">80%</div>
    <div class="pie-chart">...</div>
</div>

css

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

结果

问题是 display flex 将两个孩​​子集中在一起。是否有可能.percent在.parent不考虑的情况下说以内为中心.pie-chart？

Answer 1

您可以更改.parent到position: relative和.percent以position: absolute和中心：

top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);

下面的例子：

top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
}
.pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: green;
}