Flexbox与绝对定位实现div居中的区别及选型建议

Flexbox实现方案 #

给待居中元素的父容器设置display: flex后，添加如下CSS即可实现子元素水平+垂直居中：

justify-content: center;
align-items: center;

绝对定位实现方案 #

给待居中元素本身设置position: absolute，同时给其父元素设置非static值的position属性（通常用position: relative）作为定位基准，再添加如下CSS即可实现居中：

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

• 对文档流的影响完全不同
  Flex方案是父容器层面的布局规则，待居中的子元素始终处在正常文档流中，不会脱离排列位置，也不会覆盖其他同级元素，不需要额外处理层级问题。
  绝对定位方案会让待居中元素完全脱离正常文档流，不再占据原有布局空间，默认会覆盖在其他正常流元素上方，如果父元素没设置正确的定位基准，还会出现定位偏移到视口而非目标父容器的问题。
• 布局灵活性差距极大
  Flex是专门的一维布局模型，除了单元素居中，还可以轻松实现多元素的等间距排列、对齐方向调整、顺序重排等效果，后续如果要改布局逻辑，只需要调整父容器的少量属性即可。
  绝对定位方案只能处理单个元素的位置偏移，无法控制容器内其他元素的排列规则，只适合独立元素的位置调整。
• 渲染表现存在细微区别
  Flex方案的居中是浏览器在布局阶段直接计算的位置，不会出现子像素渲染偏差；transform实现的偏移是在合成层阶段处理的，在部分浏览器缩放场景、或者元素内包含高清位图、文字的时候，偶尔会出现边缘模糊、文字发虚的问题。
• 兼容性覆盖范围不同
  Flex方案兼容所有现代浏览器，IE10/11可以通过添加浏览器前缀实现支持；绝对定位+transform的方案兼容到IE9，覆盖的老旧浏览器范围稍广。

没有绝对通用的最优方案，根据场景选择即可：

• 普通文档流内的元素居中，比如区块内容、按钮、卡片、表单组件的对齐，优先选择Flexbox方案，代码维护成本更低，不会出现布局意外，调整灵活度更高。
• 如果是需要浮在页面上层的脱离流元素，比如全局弹窗、固定居中的加载提示、蒙层中的操作面板，选择绝对定位（或position: fixed）搭配transform偏移的方案更符合这类组件的定位需求。

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