html - Big w html/css/divs 使用/flexbox 居中文本，尽管在整个站点中使用类似的模型

Question

因此，我一直在使用 CSS 中的 flexbox 将我的代码居中，在我正在为练习/乐趣而工作的整个站点中没有问题，但我遇到了似乎无法调试的不一致。

我在两个较大的父 div 中有两个 div 框。 div 框并排放置，在我有圆形 div 的内部，我试图将 glipicons 和文本直接放在中间，同时确保圆形 div 半径的完整性不受影响。如果您有任何见解，请告诉我。 (glipicon 在主题上似乎不合适，但我只是想调试)

下面是 HTML 和 CSS 片段:

    .item1 {
      height: 600px;
      width: 49.5%;
      margin: 1px;
      color: white;
      text-align: center;
      line-height: 50px;
      font-weight: 600;
      background-color: #E2E2E2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
      .circle {
      border-radius: 50%;
      width: 50%;
      height: auto;
      padding-top: 50%;
      border: 1px solid black;
      /*background: #ef8913;*/
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      }

<div class="example-content">
        <div class="parent0">
          <div class="item1">
            <div class="circle">
              <h2><i class="fa fa-shopping-bag" aria-hidden="true"> </i>Ride Your Bike Bareass <br> Through The Desert!</h2>
            </div>
          </div>
          <div class="item0">
            <div class="circle"></div>
          </div>
        </div>
      </div>

Answer 1

如果我没看错你的问题..

宽度/高度和填充是你的敌人。这是我所做的:

    .item1 {
        height: 600px;
        width: 100%;
        margin: 1px;
        color: white;
        text-align: center;
        line-height: 50px;
        font-weight: 600;
        background-color: #E2E2E2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circle {
        border-radius: 50%;
        width: 70%;
        height: 100%;
        border: 1px solid black;
        /*background: #ef8913;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

<div class="example-content">
    <div class="parent0">
        <div class="item1">
            <div class="circle">
                <h2><i class="fa fa-shopping-bag" aria-hidden="true"> </i>Ride Your Bike Bareass <br> Through The Desert!</h2>
            </div>
        </div>
    </div>
</div>

您可能需要调整 .circle width % 以使其准确，但这些线将下降。