最稳妥结构是用<div class="product">包裹商品信息，禁用<table>和<span>；内部必须含<img>（带非空alt）、<h3>等标准语义标签，居中推荐在外层容器设display: flex并配justify-content: center。
商品展示框用什么HTML结构最稳妥
直接用 <div> 包裹商品信息，别用 <table> 或 <span>。前者语义不清、后者不能设宽高和居中。每个商品一个 <div class="product">，内部放 <img>、<h3>、<p> 这类标准标签，方便后续加样式。
-
class="product"是必须的，否则 CSS 没法精准控制 - 图片用
<img src="xxx.jpg" alt="描述">，alt属性不能空，否则无障碍访问会出问题 - 不要给
<div>写width或margin行内样式，留到 CSS 里统一管
居中用 flex 最快，但得写对三行关键CSS
只靠 text-align: center 或 margin: 0 auto 都不行：前者只对内联元素有效，后者要求块级元素有明确宽度且是“普通流”布局。真正零基础能一步到位的是 flex：
.product {
display: flex;
justify-content: center;
align-items: center;
}-
display: flex必须写在父容器上（比如<body>或外层<div>），不是写在.product自己身上 - 如果想让多个商品并排居中（比如一行三个），就把
flex写在外层容器，.product只负责单个样式 -
align-items: center会让文字和图片垂直居中；如果只想要水平居中，去掉这行也行
浏览器不认CSS？检查这三个硬性条件
Flex 居中失效，90% 是因为下面任一条件没满足：
- HTML 文件后缀是
.html，不是.txt或没后缀（双击打开时系统可能默认用记事本，但记事本保存容易丢编码） - 文件开头有标准声明：
<!DOCTYPE html>，缺了它，IE 和部分旧版浏览器会进怪异模式，flex 直接失效 - CSS 写在
<style>标签里，且该标签放在<head>中；如果写在<body>底部或单独.css文件里但没用<link rel="stylesheet">引入，样式就压根没加载
图片撑开盒子导致居中偏移怎么办
常见现象：图片比盒子宽，把整个 .product 顶出视口，看起来“居中失败”。本质是图片默认是内联元素，带底部空白（baseline 对齐导致）。
立即学习“前端免费学习笔记（深入）”；
解决只需两行：
.product img {
display: block;
max-width: 100%;
}-
display: block干掉那条看不见的空白间隙 -
max-width: 100%防止大图撑爆容器，同时保持比例；别用width: 100%，否则小图会被拉伸变形
真正卡住新手的，往往不是“怎么居中”，而是“为什么写了居中代码却没反应”——多数时候是 DOCTYPE 缺失、CSS 放错位置、或者图片没处理 baseline 空隙。这几个点对上了，居中就稳了。
