因为绝对定位元素已脱离文档流，Flex的对齐属性只作用于参与布局的子项（即非position: absolute的子元素）。父容器设了display: flex，但对position: absolute的子元素完全无效。
css字体加载慢怎么办_font-face懒加载与font-display说明
字体加载慢的根源是浏览器默认阻…
display
精选推荐
最新动态
CSS弹性盒子与绝对定位_当定位元素遇到Flex父容器
HTML怎么创建多列布局_HTML columns属性教程【排版】
直接说结论：columns 是为纯文本流式分栏设计的，比如新闻正文、博客长段落。它不适用于需要对齐卡片、固定高度容器或复杂交互的布局。强行用它做“多列卡片墙”，八成会遇到断行错乱、子元素被切开、响应式行为反直觉的问题。
css如何通过Flexbox实现分栏布局_利用flex布局分配列宽和空间
直接写flex: 1并不等于“均分”，它其实是flex: 1 1 0的简写，表示「可放大、可缩小、基准宽为0」。这意味着所有设了flex: 1的子项会平分剩余空间（不是父容器总宽），而内容本身不占空间时，它们才看起来等宽。
css浮动块级元素如何对齐文本_使用vertical-align或line-height
这是最常被误解的一点：vertical-align 只对 行内级元素（包括 inline、inline-block、table-cell）和表格单元格生效，对 float: left 或 float: right 的块级元素完全无效。如果你给一个 div 设置了 float: left，再加 vertical-align: middle，浏览器会直接忽略它。
css 初级项目中列表项间距过大怎么调整_通过行高与外边距控制
浏览器对 <ul></ul> 和 <li> 有默认样式，其中 <li> 继承父级行高（通常为 1.2 或 1.5），若列表内含多行文本或行内元素，line-height 会直接撑开垂直空间，造成“看起来间距很大”但实际没设 margin 的假象。
CSS过渡属性transition-property_指定哪些样式参与动画
它不是“开关”，而是白名单机制：只对列表里明确写出的 CSS 属性做过渡，其余一概忽略。常见错误是写成 transition-property: all 却期望 display 或 height（从 0 到 auto）能动——这两者根本不在可动画属性列表里。
如何消除 Bootstrap 中两列方形容器之间的多余间距
本文详解如何在 bootstrap 布局中精准控制两列方形容器（如图片与色块组）之间的水平间距，重点解决因默认 `col-*` 内边距（gutter）导致的间隙不均问题，并提供兼容性好、语义清晰的 css 与 bootstrap 原生方案。
css布局中如何让文字垂直居中_结合line-height或flex技巧
当容器高度确定、且只有一行文字时，line-height 是最轻量的方案：直接设为与容器高度相等即可。比如容器高 40px，就写 line-height: 40px。
css浮动图片和文字间距不一致怎么办_使用margin和padding调整
浮动图片后，紧随其后的文字出现上下间距不一致，常见于段落首行被图片“顶起”或末行“塌陷”。这不是文字本身的问题，而是 float 脱离文档流后，行框（line box）高度计算异常所致——尤其当图片高度与行高不匹配、或字体渲染存在 subpixel 差异时更明显。
CSS平滑旋转动画_利用transform:rotate打造加载进度条
直接写 transform: rotate(360deg) 做无限旋转，浏览器很可能在 0° 和 360° 交界处闪一下或顿一下——这不是 bug，是 CSS 动画对角度值做插值时的自然行为。浏览器会按最短路径补间，比如从 350° 到 10°，它可能走 -340° 而不是 +20°，导致逆向转动。