代码之家  ›  专栏  ›  技术社区  ›  stackoverfloweth

使用Flex在父级中居中,而不考虑兄弟级

  •  1
  • stackoverfloweth  · 技术社区  · 6 年前

    我正在使用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;
    }
    

    结果

    My Pie Chart

    问题是display flex将两个子节点集中在一起。能告诉我吗 .percent 居中 .parent 不服用 .pie-chart 考虑到了吗?

    2 回复  |  直到 6 年前
        1
  •  3
  •   Luan Bitar    6 年前

    你可以改变 .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>
        2
  •  0
  •   Johannes    6 年前

    position: absolute 对于百分比文本,将其 里面 饼图DIV,从而将其相对于饼图进行定位(饼图 position: relative )具有水平居中和固定负片 top 值将其放置在饼图上方。绝对定位的文本不会受到flex居中的影响,饼图DIV将居中。

    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
    }
    
    .percent {
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
    }
    
    .pie-chart {
      width: 200px;
      height: 200px;
      border-radius: 100%;
      background-color: #fa0;
      position: relative;
    }
    <div class="parent">
      <div class="pie-chart">
        <div class="percent">80%</div>
      </div>
    </div>