居中div在数字标签内

Question

why does flex solutions to center my ".time" div doesn't work? I've tried putting display:flex and justify, align content. I've tried also to display it as a block, and putting margin:0, etc. Still can't figure out how to center it (instead of top:xx%, left:xx%)

  <div class="container">

    <h3>Pomodoro timer</h3>

<figure>
    <img src="svg/food.svg" class="tomato">

    <div class="inline time">
      <div id="min">11</div>
      <div id="sec">11</div>
    </div>
</figure>
    <div id="start">st</div>
    <div id="break"></div>
  </div>

CSS:

 $responsive-text: calc(20px + 3vw);


.container {
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    align-items:center;
    width:95vw;
    max-width:450px;
    height:95vh;
    border:1px solid black;
    position: relative;
}

.tomato {
    margin-top:-30px;
    width:70vw;
    max-width: 350px;
    max-height:80%;
}

h3 {
    margin-top:0;
    font-size:$responsive-text;
}

.inline {
    display:inline-flex;
    justify-content: center;
}

.time {
    font-size: $responsive-text;
    top:37.5%;
    width:35%;
    margin:auto;
    text-align:center;
    position:absolute;
    border: 1px solid rgb(51, 28, 28);
    left:31%;
}

figure {
    display:block;
    position:relative;
    margin: 0 auto;
}

jsfiddle: https://jsfiddle.net/fakbj3v4/

Answer 1

You need to put the flexbox inside the figure element in CSS. Therefore every child in the figure element is centered which is what I assume you want

figure {

    display: flex;
    justify-content: center;
    align-items: center;

}

When you put this code on an element, these properties are applied to its children