如何在不溢出的情况下定位图标？我试着添加填充，用灵活的方式包装小部件，但到目前为止还没有成功

要在不溢出的情况下定位图标，你可以采用以下几种方法：

1. 使用CSS Flexbox布局

Flexbox是一个强大的布局工具，可以帮助你在容器内对齐和分布空间。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Icon Positioning</title>
<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100vh;
    border: 1px solid #000;
  }
  .icon {
    max-width: 100%;
    max-height: 100%;
  }
</style>
</head>
<body>
<div class="container">
  <img src="path/to/icon.png" alt="Icon" class="icon">
</div>
</body>
</html>

2. 使用CSS Grid布局

CSS Grid也是一个强大的布局系统，适用于二维布局。以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Icon Positioning</title>
<style>
  .container {
    display: grid;
    place-items: center; /* 水平和垂直居中 */
    width: 100%;
    height: 100vh;
    border: 1px solid #000;
  }
  .icon {
    max-width: 100%;
    max-height: 100%;
  }
</style>
</head>
<body>
<div class="container">
  <img src="path/to/icon.png" alt="Icon" class="icon">
</div>
</body>
</html>

3. 使用绝对定位

如果你需要更精确的控制，可以使用绝对定位。以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning Icon</title>
<style>
  .container {
    position: relative;
    width: 100%;
    height: 100vh;
    border: 1px solid #000;
  }
  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
  }
</style>
</head>
<body>
<div class="container">
  <img src="path/to/icon.png" alt="Icon" class="icon">
</div>
</body>
</html>

4. 使用JavaScript动态调整

如果你的布局需要动态调整，可以使用JavaScript来计算和设置图标的位置。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Icon Positioning</title>
<style>
  .container {
    width: 100%;
    height: 100vh;
    border: 1px solid #000;
  }
  .icon {
    max-width: 100%;
    max-height: 100%;
  }
</style>
</head>
<body>
<div class="container" id="container">
  <img src="path/to/icon.png" alt="Icon" class="icon" id="icon">
</div>
<script>
  function positionIcon() {
    const container = document.getElementById('container');
    const icon = document.getElementById('icon');
    const containerRect = container.getBoundingClientRect();
    const iconRect = icon.getBoundingClientRect();

    icon.style.top = `${(containerRect.height - iconRect.height) / 2}px`;
    icon.style.left = `${(containerRect.width - iconRect.width) / 2}px`;
  }

  window.addEventListener('resize', positionIcon);
  positionIcon(); // 初始位置
</script>
</body>
</html>