2

I'm using react and react-chartjs-2 so I think posting the markup would over complicate the question. But at a high level, the layout looks like this

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

result

My Pie Chart

The issue is that display flex is centering both children together. Is it possible to tell .percent to be centered within .parent without taking .pie-chart into consideration?

Johannes
  • 64,305
  • 18
  • 73
  • 130
stackoverfloweth
  • 6,669
  • 5
  • 38
  • 69
  • it means they need to be above each other, so it's a clear use case of potionning here. Use absolute position with the text and center it – Temani Afif Aug 06 '18 at 21:43

1 Answers1

5

You can change .parent to position: relative and .percent to position: absolute and center with: 

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

Example below:

.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>
Luan Bitar
  • 139
  • 6