做前端写页面布局的那段时间，最头疼的就是元素排版错乱，尤其是纠结如何让div垂直居中这个基础问题，网上零散的方法太多，照着抄经常换个容器就失效，白白浪费好几个小时调试样式。
最开始完全凭感觉写样式，只记得给div加margin属性，以为上下margin设为auto就能搞定垂直居中。每次写完刷新页面，div永远死死贴在容器顶部，水平位置倒是正常，垂直方向半点变化都没有。那时候根本不懂原理，只觉得是自己数值填错了，反复修改像素值、调整margin大小，折腾半天，要么元素偏移错位，要么直接撑破父容器布局，越调越乱。
后来才反应过来，margin垂直居中压根不适用于常规块级div，这个属性只对水平居中生效，垂直方向根本识别不到auto值。当时接手的是一个弹窗布局页面，父容器是固定宽高的盒子，子div是弹窗内容区，必须精准垂直居中，不能有一点偏差。
抱着临时救急的心态，试了最简单好用的flex布局方案，也是我至今写布局最常用的方法。不用写复杂代码，只需要给父级容器设置display: flex，再加上align-items: center。就这两行简单的样式代码，刷新页面的瞬间，原本置顶的div直接稳稳落在容器正中间，适配性特别好。
很多人会忽略父容器的设置，一味修改子div的样式，这是最容易踩的误区。flex居中的核心从来不是修改子元素，而是依托父容器的布局规则，对子元素自动适配定位，不管子div的宽高是固定数值还是自适应，都能完美垂直居中，不会出现挤压、偏移的问题。
我之前还傻傻试过定位布局的方法，就是给父容器设position: relative，子div设position: absolute，再搭配top: 50%、transform: translateY(-50%)。这个方法确实也能实现效果，但实操里很容易出问题。
那次做自适应页面的时候，用了绝对定位居中，页面缩放之后，div和周边的文字、图片布局完全脱节，出现重叠遮挡的情况。而且这种写法会脱离标准文档流，后续修改页面结构、调整其他元素样式时，这个居中的div总会出现各种兼容bug，维护起来特别麻烦。
静态固定布局的页面，绝对定位的垂直居中方法勉强能用，但但凡涉及自适应、多元素排版，稳定性远不如flex布局。
还有一次踩过一个很蠢的坑，忘记给父容器设置高度。随便哪种居中方法，父容器没有明确height数值，默认高度为内容高度，就算写对所有居中样式，div也不可能实现视觉上的垂直居中。
那时候排查了十几分钟代码，逐行核对样式，最后才发现父容器没定义高度，所有居中规则都没有生效的载体。从那之后，每次做div垂直居中，第一件事就是确认父容器是否设置固定高度或者自适应高度。
不用纠结五花八门的冷门写法，日常开发里，flex布局是性价比最高、最省心的方式。只需要两行父级样式，兼容绝大多数浏览器，适配静态、自适应各类页面场景，几乎不会出兼容问题。
深夜改完那版布局代码，关掉编辑器的时候，屏幕还停留在调试好的居中页面，干净规整的布局，终于没有再出现乱七八糟的排版bug。