Flexbox水平居中用justify-content: center，垂直居中用align-items: center；两者组合可同时实现居中，但需父容器有明确高度且子项为弹性子项。
Flexbox水平居中用justify-content: center
当容器设为display: flex后，justify-content控制主轴（默认是水平方向）上的子元素对齐方式。要让子元素水平居中，直接设为center即可。
注意点：
- 主轴方向由
flex-direction决定：默认row时主轴是水平的，此时justify-content管水平；若改成column，它就管垂直了 - 该属性只影响**弹性子项**，对普通块级子元素或文本节点无效（除非它们被包裹在弹性子项里）
- 如果子项宽度超出容器，
center仍会尝试居中，但可能造成溢出或截断
Flexbox垂直居中用align-items: center
align-items控制交叉轴上的对齐，也就是与主轴垂直的方向。默认主轴是水平的（flex-direction: row），所以交叉轴就是垂直方向——这时align-items: center就能实现垂直居中。
常见误区：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确高度（比如
height: 100vh或固定像素值），否则子项可能“看起来没动”，其实是容器自身高度塌陷了 -
align-items作用于所有直接子项，不能单独指定某个子项；如需单个居中，得用align-self: center - 若子项是多行（
flex-wrap: wrap），align-items只影响每行内部的交叉轴对齐，不控制行与行之间的间距
同时水平+垂直居中只需两行CSS
只要父容器是Flex容器、有明确宽高、子项是弹性子项，组合使用这两个属性就能一步到位：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 必须有高度 */
}这个写法简洁有效，但要注意几个实际限制：
- 子项不能是
float或position: absolute元素，它们已脱离文档流，不会被Flex对齐逻辑影响 - 如果子项本身是
display: block且未设宽高，它会按内容撑开，居中效果依然成立；但若子项含浮动/绝对定位后代，内部布局可能破坏视觉居中感 - 在IE10–11中，
align-items: center对某些内联元素（如<span></span>）支持不稳定，建议包裹一层<div> <h3>替代方案：<code>place-items: center更简洁CSS Grid引入了
place-items这个简写属性，它等价于同时设置align-items和justify-items。虽然名字带“grid”，但它在Flex容器上也生效（Chrome 84+、Firefox 70+、Safari 14.1+）：.container { display: flex; place-items: center; height: 100vh; }不过要注意：
-
place-items在Flex中只影响子项的对齐，不改变主轴方向；它本质上仍是align-items + justify-items，而justify-items在Flex中无实际效果（Flex没有“项目网格单元”的概念），所以实际起效的还是align-items和隐式生效的justify-content逻辑 - 兼容性不如传统双属性写法，老版本浏览器会忽略它，必须保留降级方案
- 别把它和
place-content混淆：place-content是align-content + justify-content的简写，用于多行Flex或Grid，对单行Flex无意义
Flex居中看似简单，真正卡住人的往往不是语法，而是父容器高度缺失、子项脱离流、或在混合布局中误判主轴方向。动手前先用DevTools确认容器尺寸和display计算值，比反复调样式更省时间。
-
