如何响应式地将包含嵌套圆圈的 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

像素是最差的单位， 如果您希望文本适合最小的圆圈，则可以使用，您可以分别为它们分配更大的值vhbody{background-color:blue;}&nbsp;#first-circle {&nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp;width: 90vh;&nbsp; &nbsp;height: 90vh;&nbsp; &nbsp;border: 1px solid #FFFFFF;&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;top:28px;&nbsp; &nbsp;border: 1px solid rgba(255, 255, 255);&nbsp; &nbsp;left: 50%;&nbsp;&nbsp; &nbsp;transform: translate(-50%,0) , scale(2);&nbsp;}&nbsp;#second-circle {&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp;border: 1px solid rgba(255, 255, 255);&nbsp; &nbsp;width: 70vh;&nbsp; &nbsp;height: 70vh;&nbsp; &nbsp;top: 10vh;&nbsp; &nbsp;left: 10vh;&nbsp; &nbsp;&nbsp;}&nbsp;#third-circle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp;width: 50vh;&nbsp; &nbsp;height: 50vh;&nbsp; &nbsp;top: 10vh;&nbsp; &nbsp;left: 10vh;&nbsp; &nbsp; border: 1px solid rgba(255, 255, 255);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border-radius: 50%;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }&nbsp; #fourth-circle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 30vh;&nbsp; &nbsp;height: 30vh;&nbsp; &nbsp;top: 10vh;&nbsp; &nbsp;left: 10vh;&nbsp; &nbsp; border: 1px solid rgba(255, 255, 255);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; }&nbsp; #fifth-circle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; font-size:14px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 10vh;&nbsp; &nbsp;height: 10vh;&nbsp; &nbsp;top: 10vh;&nbsp; &nbsp;left: 10vh;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color:#fff;&nbsp; &nbsp; border: 1px solid rgba(255, 255, 255,.8);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border-radius: 50%;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; .text-container{&nbsp; margin-top:0px;&nbsp; font-size: 1em;&nbsp; }&nbsp; <div id="first-circle">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="second-circle" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="third-circle" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="fourth-circle">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="fifth-circle">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="text-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>

Answer 3

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