如何设置网站图片位置让它在移动端居中

在移动端让图片居中有多种方法，以下是其中两种比较常用的方法：

1. 使用CSS Flex布局

CSS Flex布局是一种弹性布局方式，可以方便地实现元素的居中对齐。可以通过以下CSS样式来实现图片在移动端居中：

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

img{
  max-width: 100%;
  max-height: 100%;
}

在这个例子中，首先将包含图片的容器设置为Flex布局，并将水平方向和垂直方向都设置为居中对齐。然后设置图片的最大宽度和最大高度为100%，以确保图片不会超出容器的大小。

2. 使用CSS Grid布局

CSS Grid布局也是一种弹性布局方式，可以方便地实现元素的排列和对齐。可以通过以下CSS样式来实现图片在移动端居中：

.container{
  display: grid;
  place-items: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

img{
  max-width: 100%;
  max-height: 100%;
}

在这个例子中，首先将包含图片的容器设置为Grid布局，并将图片设置为在容器中居中。然后设置图片的最大宽度和最大高度为100%，以确保图片不会超出容器的大小。

需要注意的是，以上两种方法都需要将容器的高度设置为视口高度，以确保在移动端可以占据整个屏幕。同时，还需要确保图片的宽度不会超过容器的宽度，以避免图片变形。