在框中居中图标并应用动画比例悬停答案

【问题标题】：center icons in a box and apply animation scale hover在框中居中图标并应用动画比例悬停
【发布时间】：2021-07-10 23:17:07
【问题描述】：

我似乎无法在这里找到我做错了什么。当元素悬停时，transform:translate 属性会造成不良影响。

请看一下这个codepen。

https://codepen.io/kuromicho/pen/LYxrQPv

CSS

.row {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid black;
  
}
.col {
  display: block;
  width:50%;
  float: left;
  border: 1px solid red;
  }
.big-icon {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: scale 0.2s;
}

.big-icon {
  font-size: 300%;
  color: #e67e22;
}

.big-icon:hover {
  transform: scale(1.15);
}

HTML：

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

  </head>
  <body>
    <div class="row">
      <div class="col">
            <ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
        </div>
       <div class="col">
            <ion-icon name="cart-sharp" class="big-icon"></ion-icon>
        </div>
     </div>
    
  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</html>

【问题讨论】：

看看我下面的答案，你确实定义了 2 次大图标类，但没用，我添加/修改了一些修复。如有其他问题，请告诉我！
当然，我没有意识到我已经重复了大图标课程 ahahahah 虽然那不是重要的事情。问题是我在同一个类中定义了一个与图标分开的段落，并且属性显示 flex 全部移动，后来我可以用另一个只包含图标标签的 div 解决这个问题，并证明内容中心的合理性。

标签： css animation hover icons transform

【解决方案1】：

我不知道你为什么在 CSS 中定义了两次 big-icon 类，但这是我在 CSS 文件底部的修复，仔细看看我评论/删除的那些 CSS 行：

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100vh;
}

body {
  font-size: 20px;
  font-family: "Lato", "Arial", sans-serif;
  font-weight: 400;
}

.row {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid black;
  
}

.col {
  display: flex;
  justify-content: center;
  width: 50%;
/*   float: left; */
  border: 1px solid red;
  
}

.big-icon {
/*   position: relative; */
/*   left: 50%; */
  font-size: 300%;
  color: #e67e22;
/*   transform: translateX(-50%); */
  transition: transform 0.2s ease;
}


.big-icon:hover {
  transform: scale(1.15);
}

【讨论】：