HTML/CSS仿写Notion首页时图片div无法居中的问题求助

核心根因 #

写的居中样式没有生效，本质是两个代码错误导致的：

• 类名完全不匹配：CSS里写了flex居中规则的类是.nav-img，但HTML里承载hero图片的div类名是.hero-img，样式根本没有绑定到目标元素上
• 没有给容器设置水平居中的约束：块级div默认占满父元素100%宽度，内部图片如果不单独设置居中规则，就会默认贴左显示

分步修复代码 #

1. 先删掉CSS里写错类名的无效样式：

   /* 删掉这段完全没匹配到元素的代码 */
   .nav-img {
     display: flex !important;
     align-items: center;
     justify-content: center;
   }
   

2. 给实际的图片容器.hero-img补全居中样式：

   .hero-img {
     /* 容器自身水平居中 */
     margin: 0 auto;
     /* 容器内部图片居中 */
     display: flex;
     align-items: center;
     justify-content: center;
     /* 限制容器最大宽度，避免内容撑太宽 */
     max-width: 900px;
   }
   

3. 如果想让hero区域内的标题、说明文字、表单都统一居中，直接给父容器.hero加全局规则就行：

   .hero {
     /* 文本、表单等行内内容默认居中 */
     text-align: center;
     /* 整个hero块在页面中水平居中 */
     max-width: 800px;
     margin: 4rem auto 0;
     padding: 0 20px;
   }
   

顺带修复其他常见代码bug #

这些问题虽不直接导致居中失效，但会打乱整体布局：

• 修复CSS语法错误：.nav类里的width: 100没有写单位，应该改成width: 100%，而且不要对同一个类重复写多次样式定义，把float: right的规则合并到同一个.nav选择器里，避免样式覆盖混乱
• 修复变量引用错误：body的背景色写了background-color: var(--b)，但定义的CSS变量名是--background，要把引用改成var(--background)才能正常生效
• 修复外边距重复问题：.logo类里先后写了两次margin规则（margin-right: 70px和margin: 15px 50px），后面的margin会完全覆盖前面的设置，统一成需要的外边距值即可

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