文字水平居中可通过五种CSS方法实现：一、text-align:center用于块级容器内行内内容；二、flexbox的justify-content:center；三、margin:auto配合inline-block；四、position:absolute加transform:translateX(-50%)；五、...

单行文本用line-height最快，块级元素用flex最稳妥，绝对定位适合脱离文档流场景，vertical-align不适用于块级元素。

父容器需设display:flex且有足够高度，再用align-items:center实现子项垂直居中、水平靠左；单子项时可用margin:auto0达成同样效果。

Flex项目高度不一致源于align-items默认stretch且内容高度不同，解决需统一min-height并区分align-items（项级对齐）与align-content（行级对齐）。

按钮高度不一致的根源是padding未统一，应固定padding、font-size并禁用height，配合line-height、box-sizing和统一border策略确保各状态尺寸稳定。

Flex子元素不居中需先确认主轴方向：justify-content控制主轴对齐，align-items控制交叉轴对齐，二者须与flex-direction匹配；默认row时主轴水平，column时主轴垂直。

初学者应先学Flex再学Grid，因Flex聚焦一维布局、思维负担小、见效快；Grid是其二维延伸，用于复杂区域划分，二者常组合使用。

:first-child精准匹配父元素的第一个子元素，要求必须是或的首个子节点；若存在注释、空格文本节点或其他标签则失效；与:nth-child(1)效果一致但语义更明确。

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

本文详解如何通过CSSFlexbox将导航菜单水平居中、为菜单项添加均匀内外间距，并配合伪元素实现从左到右的平滑下划线悬停动画。

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

HTML5已废弃align等对齐属性，对齐完全由CSS控制：text-align仅作用于行内内容水平对齐；块级元素自身居中需用margin:auto或Flexbox；Flexbox中justify-content控主轴、align-items控交叉轴；Grid中place-items仅影响网格项在单元格内的对齐。