CSS 图片居中的多种方法：

1. 使用 Flex 布局：
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }

2. 使用 Grid 布局：
   .container {
     display: grid;
     place-items: center;
   }

3. 使用 text-align 和 line-height：
   .container {
     text-align: center;
     line-height: /* equal to container height */;
   }

4. 使用绝对定位和 transform：
   .container {
     position: relative;
   }
   .centered-img {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

5. 使用 table 和 vertical-align：
   .container {
     display: table;
     width: 100%;
     height: 100%;
   }
   .cell {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
   }

CSS 淘宝导航代码集合（附使用技巧）：

以下是一个简单的淘宝导航代码示例，你可以根据需要进行修改：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .navbar {
      background-color: #ff5000;
      padding: 10px;
      text-align: center;
      color: #fff;
    }

    .navbar a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
    }

    .navbar a:hover {
      text-decoration: underline;
    }
  </style>
  <title>淘宝导航</title>
</head>
<body>

  <div class="navbar">
    <a href="#">首页</a>
    <a href="#">女装</a>
    <a href="#">男装</a>
    <a href="#">鞋包</a>
    <!-- 添加更多导航链接 -->
  </div>

</body>
</html>

这是一个简单的橙色背景的导航栏，你可以根据淘宝的设计风格和你的需求进行定制。在这个示例中，导航链接使用了橙色的背景，鼠标悬停时出现下划线效果，你可以根据自己的设计需求进行修改。


转载请注明出处：http://www.zyzy.cn/article/detail/4047/CSS