老师，帮忙看下这样是否正确，是否需要优化，还有一个小问题

首页课程实战体系课手记专栏慕课教程

来源：2-10 过渡效果实战课（2）

多盐少糖

2021-04-13 18:01:31

问题描述：

使用transition放大图片为什图片会跑下来不再垂直居中呢，去掉transition图片就又回去了

相关截图：

相关代码：

<!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>
    <style>
      *{

          margin: 0;
          padding: 0;
          list-style: none;
      }
      .out{
          width: 100%;
      }
      .out ul{
          height: 107px;
          width: 468px;
          position: relative;
          margin:0 auto;
      }
      .out ul li{
         width: 107px;
         height: 107px;
          float: left;
          margin-right: 10px;
          position: relative;

      }
      /* 添加transition后图片就跑下去不再垂直居中了*/
      ul li img{
          display: block;
          width: 60px;
          height: 60px;
          position: absolute;
          left: 50%;
          margin-left: -30px;
          top: 50%;
          margin-top:-30px

          /* transition：all 1s linear 0s; */

      }
      ul li::before{
          content: '';
          display: block;
          width: 107px;
          height: 107px;
          transform: rotate(0deg);
          transition: transform 1s linear 0s;
      }
      ul li:nth-child(1)::before{
          content: url(/过渡和动画源码/images/a_1.png);
      }
      ul li:nth-child(2)::before{
          content: url(/过渡和动画源码/images/a_2.png);
      }
      ul li:nth-child(3)::before{
          content: url(/过渡和动画源码/images/a_3.png);
      }
      ul li:nth-child(4)::before{
          content: url(/过渡和动画源码/images/a_4.png);
      }
      ul li:hover::before{
          transform: rotate(360deg);
      }
      ul li:hover img{
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left:-40px;
      }


    </style>
</head>
<body>
    <div class="out">
        <ul>
            <li><img src="/过渡和动画源码/images/icon1.svg" alt=""></li>
            <li><img src="/过渡和动画源码/images/icon2.svg" alt=""></li>
            <li><img src="/过渡和动画源码/images/icon3.svg" alt=""></li>
            <li><img src="/过渡和动画源码/images/icon4.svg" alt=""></li>
        </ul>
    </div>
</body>
</html>