前端页面居中大全：水平居中与垂直居中通用方案

页面居中是Web前端布局出现频率最高的需求，无论是文字、按钮、卡片、弹窗，几乎所有页面组件都需要居中处理。很多初学者只会单一居中方法，遇到不同场景就无法适配，导致布局错乱，因此系统掌握全套居中方案是前端布局的核心能力。

首先是水平居中，分为行内元素和块级元素两种场景。文字、图片、按钮等行内或行内块元素，统一使用父元素text-align:center即可快速水平居中，简单高效。普通固定宽高的块级盒子，使用margin: 0 auto居中，是传统布局最稳定的方式。浮动元素、绝对定位元素无法使用margin居中，需要结合定位和transform实现居中效果。

其次是垂直居中，传统垂直居中实现难度高于水平居中。单行文本垂直居中可以设置行高等于盒子高度，适配导航栏、按钮场景。多行文本垂直居中适合使用padding上下对称内边距实现自适应居中。

现代开发最万能的居中方案是Flex居中，给父容器设置display:flex，搭配justify-content:center实现水平居中，align-items:center实现垂直居中，一行代码即可实现任意元素的完全居中，不区分行内、块级、浮动、定位元素，兼容性好、代码简洁、适配所有场景，是目前企业开发、实训项目首选的居中方案。