css 如何把图片居中显示图片

CSS可以非常方便地让图片居中显示。下面介绍两种常见的方法。

/*方法一：使用Flex布局*/.container {
      display: flex;
      justify-content: center;
     /*水平居中*/  align-items: center;
 /*垂直居中*/}
/*方法二：使用绝对定位*/.container {
      position: relative;
}
img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
 /*实现水平和垂直居中*/}
    

方法一使用Flex布局，设置容器的display属性为flex，然后使用justify-content和align-items属性分别实现图片的水平和垂直居中。注意这种方法需要保证图片的宽高不能超过容器的宽高，否则不会居中。

方法二使用绝对定位，先设置容器的position属性为relative，然后设置图片的position属性为absolute，再通过top、left和transform属性实现图片在容器中的居中显示。这种方法的优点是可以让图片在容器中任意位置居中，缺点是容器必须是相对定位。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！