css定位图片 屏幕中央

想要在网页上展示图片一般会用到标签，但是如果想要让图片居中显示，就需要使用CSS来进行定位。下面介绍如何使用CSS将一张图片居中定位。

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

对于这段代码，首先需要将图片的position属性设置为absolute，这样就可以通过top和left属性来定位图片。然后通过将top属性设置为50%，将图片移动到页面垂直方向的中间，通过设置left属性为50%，将图片移动到页面水平方向的中间。但是此时图片只是以左上角为基准点定位在屏幕中央，为了让图片的中心点位于屏幕中央，需要使用transform属性，将其属性值设置为translate(-50%,-50%)。这样就可以让图片以其中心点作为基准点居中显示。