前段时间写前端页面布局，卡在怎么让div垂直居中这个基础问题上，折腾了大半天，踩了一堆低级的布局坑。

当时要做一个登录弹窗布局，外层是固定宽高的父容器，内层弹窗div需要完整居中显示，水平居中随便写个margin:auto就能搞定，可垂直方向始终要么贴顶、要么偏下，怎么调样式都不对。一开始完全没思路，只记得网上零散的布局方法，挨个瞎试，越调越乱，页面布局直接崩坏。

最开始无脑用的是margin-top百分比的方式，想着通过设置顶部外边距把div往下挪，实现垂直居中。但这个方法特别鸡肋，百分比取值是相对于父容器宽度计算的，不是高度，适配不同屏幕尺寸的时候，居中位置会疯狂偏移，窗口稍微缩放，弹窗就彻底错位，完全没法用。

折腾好久才搞明白，静态布局下的margin适配性极差，根本不适合做通用的div垂直居中效果，只适合固定死尺寸的静态页面，现在的自适应网页基本用不上。

div垂直居中的绝对定位踩坑经历

之后换了网上很常见的绝对定位方法，给父容器设置position:relative，子div设置position:absolute，再加上top:50%、transform:translateY(-50%)。

这个方法确实能实现垂直居中，但当时没考虑适配问题，页面里多个层级的定位样式冲突了。父容器本身嵌套在其他定位模块里，导致子div的居中基准错乱，不仅没有居中，反而直接跑出了父容器的可视范围，页面出现了布局溢出的bug。

而且绝对定位会脱离普通文档流，原本页面的其他元素排版全部乱套，需要重新调整周边所有样式，为了一个居中效果，改了一堆代码，得不偿失。

div垂直居中的flex布局实操解法

实在懒得挨个调试老旧布局方法，最后试了CSS3的flex弹性布局，这也是现在前端开发里最省心、兼容性也足够的居中方案。

操作步骤特别简单，全程只需要修改父容器样式，不用改动子div的任何代码，零冗余适配所有场景。只需要给包裹目标div的父级容器，添加display:flex开启弹性布局，再加上align-items:center，这行代码就是专门用来实现子元素垂直居中的核心属性。

水平居中可以搭配justify-content:center一起使用，直接实现横竖双向居中，不管子div宽高是否固定、是否自适应，都能精准居中，不会出现偏移、溢出的问题。

我当时改完这两行样式，刷新页面的瞬间，弹窗div直接稳稳居中，没有任何多余调试，而且缩放浏览器窗口、切换移动端适配模式，布局都不会错乱，兼容性完全满足日常开发需求。

现在写所有居中布局，基本都只用flex这一套，再也不会傻傻去调margin和绝对定位，浪费大把开发时间。

最悔的是一开始不肯直接用新标准布局，非要死磕老旧低效的写法。