HTML4table布局虽能用但不推荐，因其仅适用于表格数据，用于页面布局会导致语义混乱、响应式失效、可访问性差及维护困难；Flexbox对新手更友好，需注意父容器设置display:flex、主轴与交叉轴对齐属性分工，以及现代浏览器兼容性良好。

HTML5不提供布局功能，布局由CSS的display:flex和display:grid实现；语义标签仅用于结构标注，不影响布局；移动端适配需viewport设置与媒体查询配合。

flex容器子项不垂直居中的核心原因是容器未启用flex布局或未设置align-items:center；需确保display:flex生效、父容器有真实高度、子项未溢出且无align-self覆盖。

绝对定位元素默认不参与文档流，宽高行为特殊，自适应需明确参照系（最近已定位祖先）、设父容器position:relative、合理用%、vw/vh、left/right/top/bottom及transform实现响应式布局。

直接结论：别用float，优先用flex。float本非布局设计，易致塌陷、错位、响应断裂；flex语义清晰、控制精准、响应友好，代码少、调试易、可访问性好。

子元素在CSSGrid中居中需确保容器设place-items:center且子元素占据全网格区域，或用place-self:center；常见问题包括容器无宽高、子元素被嵌套、误用justify-content等。

margin:auto在float元素上无效，因为浮动元素脱离文档流，宽度收缩且不参与自动宽度分配，导致margin:auto缺失计算依据；必须取消float才能生效。

Foundation按钮视觉不统一的根源在于基础类缺失、变量未全局生效或外部样式污染，解决需统一入口、变量驱动和层级控制：确保所有按钮显式添加.button类，通过_settings.scss统一配置$button-padding、$button-radius等变量，并在嵌套容器中重置font-size与line-he...

居中靠place-items，留白靠容器padding；需在grid容器上设padding和box-sizing:border-box，并为子元素设min-width防收缩，二者缺一不可。

当top/left/right/bottom同时设值且position为absolute或fixed时，浏览器按盒模型偏移规则计算：width=父宽−left−right，height=父高−top−bottom；relative下仅top/left有效，right/bottom被忽略。

本文提供一种简洁可靠的CSS修复方案，解决因float与transform:translateY(-50%)混用导致的容器高度塌陷、溢出内容被遮挡或居中偏移问题，并实现真正响应式的动态高度适配。

绝对定位使元素脱离Flex布局流，不参与flex排列与对齐；应让flex子项设position:relative创建定位上下文，再用absolute子元素锚定；避免同一元素既flex又absolute，改用margin-left:auto或transform微调更安全。