使用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将两个孩子集中在一起。有没有可能在不考虑.pie-chart的情况下让.percent在.parent中居中？

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%);

示例如下：

​

.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;
}

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

​