如何基于Flexbox实现DIV内图标页面居中且文字置于图标下方

最终修复方案（完全基于Flexbox实现） #

核心修改点 #

• 修复原有CSS嵌套语法错误
• 调整DOM结构，拆分图标容器与文字节点
• 全链路Flex配置实现多层级居中

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

   <style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      .servics {
         width: 100%;
         padding-top: 2%;
         text-align: center;
         margin: 10% auto;
         font-family: 'Poppins', sans-serif;
      }
      .servics h1 {
         margin-bottom: 40px;
      }
      .row {
         display: flex;
         justify-content: center; /* 整个图标组在页面水平居中 */
      }
      .icons {
         display: flex;
         gap: 40px; /* 控制图标单元之间的间距 */
         flex-wrap: wrap; /* 小屏幕自动换行 */
         justify-content: center;
      }
      .icon-item {
         display: flex;
         flex-direction: column; /* 图标在上，文字在下垂直排列 */
         align-items: center; /* 内容水平居中 */
         gap: 15px; /* 图标和文字的间距 */
      }
      .child {
         width: 150px;
         height: 150px;
         background-color: transparent;
         border: 4px solid #87CEEB;
         border-radius: 50%;
         font-size: 50px;
         color: rosybrown;
         display: flex;
         justify-content: center; /* 图标水平居中 */
         align-items: center; /* 图标垂直居中 */
      }
      .icon-text {
         font-size: 18px;
         color: #333;
      }
   </style>
</head>
<body>
   <section class="servics">
      <h1>Unsere Leistungen</h1>
      <div class="row">
         <div class="icons">
            <div class="icon-item">
               <div class="child"> <i class="fas fa-heart"></i> </div>
               <div class="icon-text">Same</div>
            </div>
            <div class="icon-item">
               <div class="child"> <i class="fas fa-heart"></i> </div>
               <div class="icon-text">Sam</div>
            </div>
            <div class="icon-item">
               <div class="child"> <i class="fas fa-heart"></i> </div>
               <div class="icon-text">Equar</div>
            </div>
            <div class="icon-item">
               <div class="child"> <i class="fas fa-heart"></i> </div>
               <div class="icon-text">Isma</div>
            </div>
          </div>
      </div>
   </section>
</body>
</html>

效果说明 #

• 所有图标整体在页面水平居中
• 每个圆形容器内的图标完美垂直+水平居中
• 对应文字自动显示在图标正下方，和图标居中对齐
• 小屏幕下图标会自动换行且保持居中

内容的提问来源于stack exchange，提问作者M K