CSS flex布局设置justify-content:center后内容未水平居中问题

问题原因 #

你写的.content的flex居中属性本身没有语法错误，不生效是默认样式干扰和写法问题导致的：

• 浏览器默认给body标签添加了8px的外边距，且你没有给内容容器设置宽度约束，右侧放文本的.top-right容器会被长文本自动撑开，占满水平方向剩余空间，flex主轴没有多余留白，justify-content: center没有生效的前提。
• 你给.top-right写死了不对称的左右内边距，又没有给文本区域设置最大宽度，进一步导致内容整体偏左，视觉上完全没有居中效果。另外你给img标签写的display: flex、flex-direction: column-reverse是无效属性，图片作为替换元素不支持这类flex容器设置。

修复步骤 #

直接调整对应CSS代码即可：

1. 添加全局样式重置，清除浏览器默认边距干扰，统一盒模型计算规则：

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   

2. 修改.content容器样式，增加宽度约束、居中兜底和均匀间距：

   .content {
       display: flex;
       justify-content: center;
       align-items: flex-start;
       max-width: 1200px; /* 可根据设计需求调整整体内容最大宽度 */
       margin: 0 auto; /* 块级元素水平居中兜底，兼容特殊场景 */
       gap: 32px; /* 控制左侧图片和右侧文本的间距，替代之前写死的单侧padding */
       padding: 0 24px; /* 小屏幕下左右留安全边距，避免内容贴边 */
   }
   

3. 调整.top-right样式，移除不对称的固定内边距，给文本区域设置合理最大宽度提升阅读体验：

   .top-right {
       display: flex;
       flex-direction: column;
       padding-top: 23px; /* 和左侧图片顶部对齐即可 */
       max-width: 600px; /* 控制文本行长度，避免行过长阅读困难 */
   }
   

4. 清理.left img上的无效样式：

   .left img {
       padding-top: 23px;
       width: 350px;
       /* 删除原代码中此处的display: flex、flex-direction: column-reverse，这两个属性对img标签无效 */
   }
   

调整后刷新页面并清除浏览器CSS缓存，内容就会正常水平居中显示。

内容的提问来源于stack exchange，提问作者Daniel M.