如何响应式地将包含嵌套圆圈的 div 居中？

Question

我有绝对定位的内圆，并且我成功地将它们居中，如下所示。最小的圆内也有文本居中。https://i.stack.imgur.com/5lHKK.png 问题是当我想让它响应时，这也会减少宽度。滚动条发生了我不想要的情况，并显示为红色标签。我希望在减少宽度时从左侧和右侧裁剪我的圆圈。我怎样才能做到这一点？https://i.stack.imgur.com/JPJHG.png body{background-color:blue;} #first-circle {   border-radius: 50%;   width: 643px;   height: 643px;   border: 1px solid #FFFFFF;   position: absolute;   top:28px;   border: 1px solid rgba(255, 255, 255);   left: 50%;    transform: translate(-50%,0); } #second-circle {   position: absolute;   border-radius: 50%;   border: 1px solid rgba(255, 255, 255);   width: 508px;   height: 508px;   top: 50%;   left: 50%;   margin: -254px 0px 0px -254px; } #third-circle {    position: absolute;    width: 382px;    height: 382px;    border: 1px solid rgba(255, 255, 255);    box-sizing: border-box;    border-radius: 50%;    top: 50%;    left: 50%;    margin: -191px 0px 0px -191px;  }  #fourth-circle {    position: absolute;    width: 254px;    height: 254px;    border: 1px solid rgba(255, 255, 255);    box-sizing: border-box;    border-radius: 50%;    top: 50%;    left: 50%;    margin: -127px 0px 0px -127px;  }  #fifth-circle {    position: absolute;    font-size:14px;    width: 128px;    height: 128px;    text-align: center;    color:#fff;    border: 1px solid rgba(255, 255, 255,.8);    box-sizing: border-box;    border-radius: 50%;    top: 50%;    left: 50%;    margin: -64px 0px 0px -64px;  }

Answer 1

设置 overflow="hidden" 在身体上或者我可以成为你的外层div

Answer 2

像素是最差的单位， 如果您希望文本适合最小的圆圈，则

可以使用，您可以分别为它们分配更大的值vh

body{

background-color:blue;

}

 #first-circle {

   border-radius: 50%;

   width: 90vh;

   height: 90vh;

   border: 1px solid #FFFFFF;

   position: absolute;

   top:28px;

   border: 1px solid rgba(255, 255, 255);

   left: 50%; 

   transform: translate(-50%,0) , scale(2);

 }

 #second-circle {

   position: absolute;

   border-radius: 50%;

   border: 1px solid rgba(255, 255, 255);

   width: 70vh;

   height: 70vh;

   top: 10vh;

   left: 10vh;

   

 }

 #third-circle {

    position: absolute;

       width: 50vh;

   height: 50vh;

   top: 10vh;

   left: 10vh;

    border: 1px solid rgba(255, 255, 255);

    box-sizing: border-box;

    border-radius: 50%;

  

   

  }

  #fourth-circle {

    position: absolute;

           width: 30vh;

   height: 30vh;

   top: 10vh;

   left: 10vh;

    border: 1px solid rgba(255, 255, 255);

    box-sizing: border-box;

    border-radius: 50%;

   

   

  }

  #fifth-circle {

    position: absolute;

    font-size:14px;

               width: 10vh;

   height: 10vh;

   top: 10vh;

   left: 10vh;

    text-align: center;

    color:#fff;

    border: 1px solid rgba(255, 255, 255,.8);

    box-sizing: border-box;

    border-radius: 50%;

 

  

  }

  .text-container{

  margin-top:0px;

  font-size: 1em;

  }

  <div id="first-circle">   

                          <div id="second-circle" >

                              <div id="third-circle" >

                                <div id="fourth-circle">

                                  <div id="fifth-circle">

                                       <div class="text-container">

                                       

                                      </div>       

                                  </div>

                                </div>

                              </div>

                          </div>

                         </div>

Answer 3

如果要始终显示所有圆圈，则必须将所有宽度和高度像素编辑为 vw/vh 以使其随页面缩放。如果要裁剪“图像”，可以将溢出设置为隐藏，圆圈将被裁剪。