如何在响应式HTML页面中实现图片的垂直与水平双居中？

你的代码问题在于把flex布局的属性直接用在了图片元素上，flex是需要给父容器（比如<body>）设置的，子元素才能借助容器的属性实现居中。另外你重复写了display: flex，还加了padding-top: 15%这类干扰居中的属性，导致垂直居中失效。

下面是三种可靠的实现方式，都能保证屏幕尺寸变化时图片始终居中：

方法一：Flex布局（最推荐，响应式友好） #

给<body>设置flex容器属性，让它铺满整个视口高度，再通过justify-content和align-items实现子元素的水平、垂直居中：

<body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
  <img src="img/blogg.PNG" style="width: 20%; height: 20%;" />
</body>

• min-height: 100vh：让<body>高度至少等于屏幕视口高度，确保垂直方向有足够空间居中
• margin: 0：消除浏览器默认的<body>边距，避免出现滚动条或偏移
• 图片无需额外布局属性，只保留尺寸设置即可

方法二：Grid布局（代码更简洁） #

利用Grid的place-items属性一步实现垂直水平居中：

<body style="display: grid; place-items: center; min-height: 100vh; margin: 0;">
  <img src="img/blogg.PNG" style="width: 20%; height: 20%;" />
</body>

• place-items: center是align-items: center + justify-items: center的简写，作用和Flex布局一致

方法三：绝对定位法 #

通过绝对定位结合transform平移实现居中：

<body style="position: relative; min-height: 100vh; margin: 0;">
  <img src="img/blogg.PNG" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%; height: 20%;" />
</body>

• top: 50%; left: 50%：把图片的左上角定位到屏幕中心
• transform: translate(-50%, -50%)：将图片自身向左、向上平移50%的尺寸，让图片中心与屏幕中心重合

内容的提问来源于stack exchange，提问作者Devika