居中Centering
你可能会说
这个框帮我水平垂直都居中——怎么就那么难？
居中是把文字、元素或一组内容在容器的水平、垂直或两条轴上对齐到中间的布局方式按钮组可用弹性布局 Flex居中，网格单元可用网格布局 Grid的 place-items。文字和定宽块有各自做法；absolute 加 transform 适合浮层，不应作为普通内容的默认方案。
组成结构 · Anatomy
元素主轴：justify-content: center交叉轴：align-items: center
写上 display: flex 的父元素，居中都是它说了算
被放到正中间的那个子元素
justify-content: center，管主轴方向的居中
align-items: center，管交叉轴方向的居中
常见变体 · Variants
Flex 居中Flex
普通容器中最常用的居中方法
Grid 居中Grid
父元素已经是 grid 时最省字
绝对定位居中Absolute
老代码里常见，能认出来就行
典型使用场景
登录卡片放页面正中
登录 BuildHub
空状态插图居中
暂无收藏
去逛逛，把喜欢的组件收藏起来
标题文字居中
新功能上线
像聊天一样写前端
描述你想要的效果，剩下的交给 AI
定宽容器水平居中
延伸阅读 · 权威出处