html - 在图形标签内居中 div

Question

为什么使我的“.time”div 居中的 flex 解决方案不起作用？我试过将 display:flex 和 justify, align 内容。 我也试过将它显示为一个 block ，并放置 margin:0 等。仍然无法弄清楚如何将它居中(而不是 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

您需要将 flexbox 放在 CSS 中的 figure 元素内。因此 figure 元素中的每个 child 都居中，这就是我假设你想要的

figure {

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

}

当您将此代码放在一个元素上时，这些属性将应用于其子元素