怎么让div居中显示-依靠样式属性完成页面元素居中

当时修改前端页面，整个人卡在怎么让div居中显示这块，连着试了好几种写法，页面里的模块要么死死贴在左侧边缘，要么就紧贴顶部位置，反复刷新浏览器预览界面都不见半点变化，手边还开着几个过往写过的代码文件，想着照着旧案例直接复刻样式，结果越改布局越混乱，原本排列规整的页面还多出了不少莫名错位的缝隙，手指在键盘上不停敲击，心里也跟着泛起焦躁，明明只是一个很基础的样式设置，偏偏就卡在这简单的一步里进退不得，一时间也想不通基础的布局怎么会出现这么多问题。

就盯着浏览器的预览窗口，来回拖拽窗口大小，想排查是不是自适应带来的影响。

一开始随手加上text-align:center，下意识觉得文本居中的写法能直接套用到div容器上，刷新页面之后才发现完全行不通，容器本身的位置半点都没有挪动，只有容器内部的文字挪到了水平中间，忙活了十几分钟到头来等于做了无用功，当时还暗自疑惑，同样是设置居中效果，文字和容器的写法差别居然这么大，也懒得去翻详细的技术文档，总觉得凭着过往的零碎记忆凑几行代码就能把问题解决。

折腾好久才反应过来，块级元素和行内元素的居中逻辑本来就不一样，div属于标准的块级元素，单纯控制文本对齐自然起不到作用。试着给目标div设置好固定宽度和高度，再添上margin:0 auto这行代码，保存文件后刷新页面，能清晰看到整个模块稳稳落在了页面水平正中的位置，水平方向的问题顺利解决，可垂直方向的位置依旧偏上，距离完整的居中效果还有明显差距。

垂直居中这块又耽搁了不少时间，试过直接修改top和left的像素数值，靠手动调参去硬凑位置，可只要缩放浏览器窗口，好不容易调好的居中状态就会立刻失效，窗口拉大模块就往下偏移，窗口缩小又会挤到顶部角落，这种依靠固定像素定位的方式，根本没办法适配不同尺寸的浏览窗口，而这次的页面项目明确要求兼容多端设备，这种临时拼凑的写法自然不能投入使用。

转而用flex布局来尝试解决问题，给包裹div的外层父容器添上display:flex属性，再搭配justify-content与align-items两个属性，分别管控水平和垂直两个方向的对齐方式，敲完最后一行样式代码按下保存键，心里依旧悬着一丝顾虑，生怕又冒出新的布局bug。

页面刷新。

屏幕上的div瞬间停在了父容器的正中心位置，之后反复拖动浏览器窗口改变大小，它的位置始终保持稳定，再也没有出现偏移、错位的情况。前后前前后后耗了快一个小时，从盲目套用样式代码，到慢慢分清不同布局方式的适用场景，期间删掉了不少重复冗余的代码，也清理了好几行用来临时调试的无效内容，一开始烦躁的情绪也慢慢消散下去，其实基础的居中实现方式并不算多，只是一开始心态急躁，没分清元素类型就盲目动手尝试，才平白绕了许多弯路。当下也没有去深究各种冷门写法，既然flex布局能完美满足这次的需求，就把这套代码完整保留下来，方便后续复用。

关掉前端调试窗口，顺手把这段可用的样式代码复制粘贴到本地记事本存档。