CSS居中对齐图片的实现方法

方法一：使用Flexbox布局

.container {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}

方法二：使用Grid布局

.container {
  display: grid;
  justify-items: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}

方法三：使用绝对定位

.container {
  position: relative; /*相对定位*/
}

img {
  position: absolute; /*绝对定位*/
  top: 50%; /*垂直居中*/
  left: 50%; /*水平居中*/
  transform: translate(-50%, -50%); /*调整位置*/
}

常见问答