如何在≤420px移动端视口强制居中图片内容？

最安全的修改方式（避免主题更新丢失代码） #

直接用WordPress自带的自定义CSS功能，无需修改主题原有文件：

1. 后台进入「外观」>「自定义」>「额外CSS」
2. 粘贴以下代码：

@media only screen and (max-width: 420px) {
    /* 针对内容区域内的图片居中，若选择器不生效，可替换为图片实际的父容器或自身类名 */
    .content_wrapper img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; /* 防止图片超出容器宽度 */
    }
}

3. 保存设置即可生效。

若需修改主题样式文件 #

选responsive.css而非responsive.min.css——前者是未压缩的源码，可读性强、维护方便；后者是压缩后的生产文件，编辑难度大。
修改步骤：

1. 找到主题目录下的responsive.css文件，定位到@media only screen and (max-width: 420px)的媒体查询块
2. 在该块的末尾添加上述图片居中的CSS代码
3. 保存文件，若主题有自动压缩功能，会自动生成新的responsive.min.css；若无，可自行压缩代码替换原responsive.min.css

补充说明 #

如果.content_wrapper img选择器不生效，打开浏览器开发者工具（F12），查看图片的实际类名或父容器类名，替换选择器即可。

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